CODEWITHSUNDEEP
reactjsantdstorybook
RuntimeError
RuntimeError

Reputation: 1390

Use antd for React together with Storybook v5

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:

enter image description here

And as you can see here, it understands that the menu is created by the UI library, but there is no antd styling applied:

enter image description here

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?

Upvotes: 4

Views: 1012

Answers (1)

Ahmed Nawaz Khan
Ahmed Nawaz Khan

Reputation: 1806

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 `

Upvotes: 1

Related Questions