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

问题描述

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

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

但是，我遇到了在 modal.stories.js 中应用样式的问题.如果我不包含 import { modal } from 'antd' 并使用 Modal 组件导出一个常量，我的 own 样式组件将没有应用到它的蚂蚁设计样式.

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.

在上面的例子中，我得到了两个模态 basicModal 和 basicModal2，它们都由 ant-design 设计.但是，如果我注释掉 basicModal2，basicModal 将恢复为默认的 CSS 样式.

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.

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

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

推荐答案

Import antd 样式 import 'antd/dist/antd.css'; 在 storybook 的 config.js 文件:

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);

请参阅 storybook 中的 CSS 支持 文档.

Refer to CSS Support at storybook docs.

这篇关于Storybook 需要导出默认的 Ant Design 组件以应用样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！