reactjs - Storybook 需要导出默认的 Ant Design 组件以应用样式

Question

我希望使用 Ant Design 设计我的一些 React 组件并在 Storybook 中记录它们。

故事书和组件都编写正确且工作正常。

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, "../")
            }
        ]
    }
};

但是，我遇到了在 modal.stories.js 中应用样式的问题。 .如果我不包括 import { modal } from 'antd'并使用 Modal 导出常量组件，我自己的样式组件不会应用 Ant 设计样式。

在上面的例子中，我得到两个模态 basicModal和 basicModal2两者均采用 ant-design 设计。但是如果我注释掉 basicModal2 basicModal恢复到默认的 CSS 样式。

有没有办法解决这个问题，而无需在每个故事中添加默认的 Ant Design 组件？

Answer 1

故事书 v6
进入(或创建).storybook/preview.js并添加 import 'antd/dist/antd.css';到顶部。

示例 .storybook/preview.js

import 'antd/dist/antd.css';

export const parameters = {
    actions: { argTypesRegex: '^on[A-Z].*' },
};