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
`
Related
With React (typescript) and MUI (5.4.2), I'm trying to put everything regarding styles within a single file, wrapping everything in my App.tsx.
Issue: The custom MUI theme does not apply to the rest of my app (fallback to default MUI theme)
The whole thing worked fine when the ThemeProvider component was placed directly within the App.tsx file, but broke as soon as I placed it elsewhere. I need to keep a separated component, for I'll add Elastic UI on top of MUI later on.
My App.tsx file:
function App() {
<UiProvider>
// ...whole app
</UiProvider>
}
The UiProvider component is a simple wrapper component as it follows:
import {ThemeProvider} from "#mui/styles";
import {CustomTheme} from "../../themes/CustomTheme";
import {createTheme, Theme} from "#mui/material/styles";
const UiProvider = (props: any) => {
return (
<ThemeProvider theme={CustomTheme}>
{props.children}
</ThemeProvider>
)
}
export default UiProvider
Because #mui/styles is the legacy styling solution for MUI, if this is for v5, perhaps the import for ThemeProvider should be:
import { ThemeProvider } from '#mui/material/styles';
I created a project using electron react boilerplate
https://github.com/electron-react-boilerplate/electron-react-boilerplate
Everything works, but I decided to add antd (ant design)
yarn add antd
Then I import the antd styles
index.tsx
...
import "./styles/global.css";
import "./styles/fonts.css";
import "antd/dist/antd.css"
...
Next I used a button of type primary
some_component.tsx
import React from "react";
import s from './someComponent.module.scss'
import { Button } from "antd";
export const SomeComponent: React.FC = () => {
return <div className={s.root}>
<Button type={'primary'}> button text </Button>
</div>
}
But the style of the button remains the same (with standard styles)
I tried importing the component styles directly into my global.css, also tried adding to the component style, but that didn't change anything
#import "~antd/dist/antd.css";
I have looked into the following repository where it works, however I didn’t figure out how to add it to my project. I don't want to use this repository as it works crookedly and doesn't use typescript
Thanks!
you can add this import in App.global.css or create new one custom.global.scss
copy this line
#import '~antd/dist/antd.css';
then import this scss into your App.tsx
import './custom.global.scss';
This should work
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
I used my react TypeScript project for ant-design, I have some issue when I reload the page, css loading delay, any reason for this?
I imported my main.css to
#import './../node_modules/antd/dist/antd.css';
Actually, based on And Design Doc about getting a start, You could use babel plugin for automatic loading used components like below, it is a recommended way:
// .babelrc or babel-loader option
{
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` for less
]
}
By using this way (from docs):
This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets.
So you can import the component easily and there is no need to load CSS manually, just like below:
import { Button } from 'antd';
But if you don't want to use the above plugin, you can use Ant Desing component by importing its CSS inside each component like below:
import React from 'react';
import Button from 'antd/es/button';
import 'antd/es/button/style/css'; // <<=== this way
import './CustomButton.css';
const CustomButton = () => (
<div className="custom-button">
<Button type="primary">
Button
</Button>
</div>
);
And there is another way, use your own CSS or SCSS or LESS, but import the component CSS at the top of your component CSS system, just like below exactly like docs:
// the custom component
import React from 'react';
import Button from 'antd/es/button';
import './CustomButton.css';
const CustomButton = () => (
<div className="custom-button">
<Button type="primary">
Button
</Button>
</div>
);
// the CustomButton.css file
#import '~antd/es/button/style/css';
.custom-button {
background-color: red; // for example
}
Also, you can use the whole Ant Design CSS instead of using separately each component. I mean this:
import 'antd/dist/antd.css';
Instead of this:
import 'antd/es/button/style/css';
For this way of loading CSS, it is better to import it once at the root of the project or the CSS system.
HINT: I prefer the first, using babel plugin, it is safe, more clear and more readable.
Replace
#import './../node_modules/antd/dist/antd.css';
with
#import '~antd/dist/antd.css';
This is given in the documentation you linked.
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