在storybook中使用antd

栏目: JavaScript · 发布时间: 5年前

内容简介:最近一个 react 的项目有用到了 antd 这个 ui 库。这里作个笔记记录一下如何在 storybook 中显示 antd 的组件。项目是使用这里创建了一个

最近一个 react 的项目有用到了 antd 这个 ui 库。这里作个笔记记录一下如何在 storybook 中显示 antd 的组件。

项目是使用 create-react-app 创建的,项目目录结构如下:

├── .storybook/
├── README.md
├── antd-theme.js
├── node_modules
├── package.json
├── public
└── src
    ├── App.js
    ├── components
    │   ├── button.js
    │   └── button.stories.js
    ├── index.js
    └── registerServiceWorker.js

这里创建了一个 button 组件,内容如下:

// src/components/button.js
import React, { Component, Fragment } from 'react';
import { Button } from 'antd';

class ButtonGhostextends Component{
  render() { 
    return (
      <Fragment>
        <h3 className="ex-title">Ghost Button</h3>
        <div style={{ background: 'rgb(47, 45, 165)', padding: '26px 16px 16px' }}>
          <Button type="primary">Primary</Button>
          <Button className="ml20" ghost>Default</Button>
          <Button className="ml20" type="dashed" ghost>Dashed</Button>
          <Button className="ml20" type="danger" ghost>danger</Button>
        </div>
      </Fragment>
    );
  }
}
 
export default ButtonGhost;

对应的 storybook 案例如下:

// src/components/button.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './button';

storiesOf('General', module)
  .add('Button', () => <Button />)

然后 storybook 配置如下:

// .storybook/config.js
import React from 'react'
import { configure } from '@storybook/react'
import { ThemeProvider  } from 'styled-components'

const req = require.context('../src/components', true, /\.stories\.js$/)

function loadStories(){
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module)

然后运行 storybook : start-storybook -p 6006 -c .storybook ,效果如下:

在storybook中使用antd

这是由于 antd 的 css 没有加载,因此所有按钮的样式都没有。

参考 https://ant.design/docs/react/use-with-create-react-app-cn 的说明,修改 babel 和 webpack 的配置。

参考 https://storybook.js.org/configurations/custom-webpack-config 的说明,修改 storybook 的 webpack 配置。

创建文件 .storybook/.babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            ">1%",
            "last 4 versions",
            "Firefox ESR",
            "not ie < 11"
          ]
        }
      }
    ],
    "react",
    "stage-3"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

创建文件 .storybook/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader",
          options: {
            //modifyVars: antdTheme, // 如果要自定义主题样式
            javascriptEnabled: true
          }
        }]
      }
    ]
  }
};

然后在 .storybook/config.js 文件添加 import 'antd/dist/antd.less';

最后的效果如下:

在storybook中使用antd

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Learning PHP & MySQL中文版

Learning PHP & MySQL中文版

车立红 / 中国电力出版社 / 2007-06 / 36.00元

《Learning PHP & MySQL中文版》将介绍程序、模板和数据库的工作原理,讲述如何应对其中的挑战,并彻底地探索这些技术。一起来看看 《Learning PHP & MySQL中文版》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具