故事书需要导出默认的Ant Design组件以应用样式 [英] Storybook requires default Ant Design component to be exported for styling to be applied

问题描述

我希望使用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 样式的组件将不会应用ant设计样式.

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?

推荐答案

在故事书的config.js文件中导入antd样式import 'antd/dist/antd.css';:

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支持文档.

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