I set up react-suneditor just as it said in the docs, using dynamic loading since I'm using Next.js.
import React from 'react';
import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
const SunEditor = dynamic(() => import("suneditor-react"), {
ssr: false,
});
const MyComponent = props => {
return (
<div>
<p> My Other Contents </p>
<SunEditor />
</div>
);
};
export default MyComponent;
And the rich text editor works and looks fine when developing on my macbook. However when I push to my server on Heroku it totally messes up the styling. I wonder if there is an issue when loading the css?
How it looks on development:
How it looks on server:
I made it work by importing source css instead of the dist one :
import 'suneditor/src/assets/css/suneditor.css'
But IMHO, this is just a workaround.
I suggest to open an issue on https://github.com/mkhstar/suneditor-react
Related
I'm trying to use Material UI icons inside my Qwik website.
I used the answers of If possible, how to use MUI with Qwik framework? and here's my Icons.jsx file:
/** #jsxImportSource react */
import { qwikify$ } from '#builder.io/qwik-react'
import AcUnitIcon from '#mui/icons-material/AcUnit'
import MenuIcon from '#mui/icons-material/Menu'
import AddIcon from '#mui/icons-material/Add'
import RemoveIcon from '#mui/icons-material/Remove'
import DriveFileRenameOutlineOutlinedIcon from '#mui/icons-material/DriveFileRenameOutlineOutlined'
export const MuiAcUnitIcon = qwikify$(() => <AcUnitIcon />)
export const MuiMenuIcon = qwikify$(() => <MenuIcon />)
export const MuiDriveFileRenameOutlineOutlinedIcon = qwikify$(() => <DriveFileRenameOutlineOutlinedIcon className='text-white' />)
export const MuiAddIcon = qwikify$(({ sx, className }) => <AddIcon sx={sx} className={className} />)
export const MuiRemoveIcon = qwikify$(({ sx, className }) => <RemoveIcon sx={sx} className={className} />);
Everything works great in the development. But when I want to build the app for the production environment using npm run build or npm run preview, I get this error:
The JSX import source cannot be set without also enabling React's "automatic" JSX transform
And every component that has used the MUI icon would render as a blank space on my website.
I also tried How to fix vite warning: The JSX import source cannot be set?, but it made no difference.
Here's the issue that we wrote for the Qwik team. And here's a reproducable repository.
What should we do to fix this?
I would like the content editor to define the primary colors of the website via Headless CMS,
using NextJS with preferable sass modules. Here is an example of it's purpose to give you an idea of what I'm trying to achieve
// style.module.scss
import fromHeadless './api/MyHeadlessCMS'
$color_primary: ${fromHeadless.primaryColor}
$color_secondary: ${fromHeadless.secondaryColor}
$color_text_body: #000;
.title{
color:$color_primary
}
.paragraph{
color:$color_text_body
}
See ${fromHeadless.primaryColor}
// Mycomponent
import style from 'style.module.scss'
const MyComponent = () => {
return(
<div>
<h1 className={style.title}>Hey hey</h1>
<p className={style.paragraph}>Something good</p>
</div>
)
}
export default MyComponent
So I know it is not possible to import js into a scss file, but I'm just trying find a solution with the outcome of using a dynamic scss/css variable defined outside of the sass file.
Now, I am stuck for several hours trying to make Storybook work with antd in my new React application (created with create-react-app), without success.
Whatever I do, Storybook does not take the styling of antd.
For example, I created a menu item with antd:
menuNav.tsx:
import React from "react";
import {Menu} from 'antd';
import "antd/dist/antd.less";
const MenuNav = () => {
return (
<Menu mode="horizontal">
<Menu.Item key="menu1">
This is my menu title
</Menu.Item>
</Menu>
)
}
export default MenuNav;
But the result looks like this, no styling at all, but a list:
And as you can see here, it understands that the menu is created by the UI library, but there is no antd styling applied:
This is the story file of MenuNav, 3-Menu.stories.js:
import React from "react";
import MenuNav from '../components/MenuNav';
export default {
title: "MenuNav",
component: MenuNav,
};
export const Text = () => <MenuNav></MenuNav>
I already tried to add a config.js inside ./storybook as suggested here, with no success. Furthermore, I tried adding a webpack.config.js in the same directory as recommended here, same result.
What am I doing wrong?
try adding #import '~antd/dist/antd.css'; to your applications main file, let say index.css which for example is placed in src folder and then add import '../src/index.css'; to .storybook/preview.js
`
I am decently new to react and am now trying to add semantic ui to my website. Every time I try to load the components they show as regular html instead of how semantic ui is supposed to look.
Here is an example of a class I am exporting:
import React, { Component } from "react";
import {Radio} from 'semantic-ui-react';
const RadioExampleToggle = () => <Radio toggle />
class Contact extends Component {
render() {
return (
<div>
<h2>DEMO PAGE</h2>
<p>Just a demo.
</p>
{RadioExampleToggle()}
</div>
);
}
}
export default Contact;
This will show up as a regular radio button which is what I find weird. How do I get it to display the semantic UI versions.
Please try import CSS file from semantic-ui.
import 'semantic-ui-css/semantic.min.css'
Try this:
Put it in your index.js
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
Doing it this way will also help you when your app offers theme switching functionality.
code sample
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;