Storybook requires default Ant Design component to be exported for styling to be applied

问题

I'm looking to design some of my React Components using Ant Design and documenting them in Storybook.

Both the storybook and components are written correctly and working.

modal.stories.js

import React from "react";
import { action } from "@storybook/addon-actions";
import { Button } from "@storybook/react/demo";
import { BasicModal } from "./BasicModal";
import { Modal } from "antd"; // IF I REMOVE THIS ANT DESIGN DOESN'T APPLY.

export default {
  title: "Modals"
};

export const basicModal = () => <BasicModal visible={true} />;
export const basicModal2 = () => <Modal visible={true} />; //IF I REMOVE THIS ANT DESIGN DOESN'T APPLY.

BasicModal.tsx

import React, { ReactNode } from "react";
import { Modal } from "antd";
interface BasicModalProps {}

export const BasicModal: React.FC<BasicModalProps> = ({}) => {
  return (
    <Modal
      title="Basic Modal"
      visible={true}
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </Modal>
  );
};

webpack.config.js

const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                loader: 'babel-loader',
                exclude: /node_modules/,
                test: /\.js$/,
                options: {
                    presets: ["@babel/react"],
                    plugins: [
                        ['import', {libraryName: "antd", style: true}]
                    ]
                },
            },
            {
                test: /\.less$/,
                loaders: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "less-loader",

                        options: {
                            modifyVars: {"@primary-color": "#d8df19"},
                            javascriptEnabled: true
                        }
                    }
                ],
                include: path.resolve(__dirname, "../")
            }
        ]
    }
};

However I am running into an issue of having the styles apply in modal.stories.js. If I do not include import { modal } from 'antd' and export a constant using the Modal component, my own styled component will not have the ant design styling applied to it.

In the above example, I get two modals basicModal and basicModal2 both having styled by ant-design. But if I comment out basicModal2 the basicModal reverts back to default CSS styling.

Is there a way to fix this without adding a default Ant Design component in each story?

回答1:

Import antd styles import 'antd/dist/antd.css'; within storybook's config.js file:

// @ .storybook/config.js 
import { configure } from '@storybook/react';
import 'antd/dist/antd.css';

function loadStories() {
  const req = require.context('stories', true, /\.stories\.js$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Refer to CSS Support at storybook docs.

来源：https://stackoverflow.com/questions/58555019/storybook-requires-default-ant-design-component-to-be-exported-for-styling-to-be

标签

reactjs

antd

StorYBook