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

Posted

技术标签:

【中文标题】Storybook 需要导出默认的 Ant Design 组件以应用样式【英文标题】:Storybook requires default Ant Design component to be exported for styling to be applied 【发布时间】:2020-02-21 14:23:25 【问题描述】:

我希望使用 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 设计样式。

在上面的例子中,我得到了两个模态框 basicModalbasicModal2 都由 ant-design 设计。但是,如果我注释掉 basicModal2basicModal 将恢复为默认 CSS 样式。

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

【问题讨论】:

【参考方案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].*' ,
;

【讨论】:

但是如何从 .less 文件中修改主题变量呢? 对我不起作用。它仍然说: ./node_modules/antd/dist/antd.css 中的错误 13:6 模块解析失败:意外令牌 (13:6) 您可能需要适当的加载程序来处理此文件类型,目前没有配置加载程序来处理这个文件。见webpack.js.org/concepts#loaders【参考方案2】:

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

// @ .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);

请参阅 CSS Support storybook 文档。

【讨论】:

以上是关于Storybook 需要导出默认的 Ant Design 组件以应用样式的主要内容,如果未能解决你的问题,请参考以下文章

NX - 带有 Storybook 和单独导出组件的 UI 库

如何导出在 storybook 中创建的 React Native 组件以便在实际应用中使用?

ant design pro 导出table内容到Excel

如何删除默认的 Storybook Canvas 样式?

用Ant给Unity3D导出Eclipse工程打包APK

storybook创建vue组件库文档