请稍等 ...

使用@storybook/addon-info组件的属性表格无样式

按步骤引入@storybook/addon-info后只有表格没有样式。。?
表格无样式

依赖：

{
  "dependencies": {
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "classnames": "^2.2.6",
    "node-sass": "^4.14.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^5.3.18",
    "@storybook/addon-info": "^5.3.18",
    "@storybook/addon-links": "^5.3.18",
    "@storybook/addons": "^5.3.18",
    "@storybook/preset-create-react-app": "^2.1.1",
    "@storybook/react": "^5.3.18",
    "@testing-library/jest-dom": "^4.2.4",
    "@types/classnames": "^2.2.10",
    "@types/storybook__addon-info": "^5.2.1",
    "react-docgen-typescript-loader": "^3.7.2"
  }
}

main.js

module.exports = {
  stories: ['../src/**/*.stories.tsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
};

webpack.config.js

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /.tsx?$/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [require.resolve('babel-preset-react-app')]
        }
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {
          shouldExtractLiteralValuesFromEnum: true,
          propFilter: (prop) => {
            if (prop.parent) {
              return !prop.parent.fileName.includes('node_modules')
            }
            return true
          }
        }
      }
    ]
  })
  config.resolve.extensions.push('.ts', '.tsx')
  return config
}

使用

import React from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { withInfo } from '@storybook/addon-info'

import Button, { ButtonSize, ButtonType } from './button'

const defaultButton = () => (
  <Button onClick={action('默认按钮点击事件')}>默认按钮</Button>
)
const sizeButton = () => (
  <div>
    <Button size={ButtonSize.Small}>小型按钮</Button>
    <Button size={ButtonSize.Large}>大型按钮</Button>
  </div>
)
const typeButton = () => (
  <div>
    <Button btnType={ButtonType.Danger}>危险按钮</Button>
    <Button btnType={ButtonType.Primary}>一般按钮</Button>
    <Button
      btnType={ButtonType.Link}
      href="https://www.baidu.com"
      target="_blank"
    >
      链接按钮
    </Button>
  </div>
)
storiesOf('按钮组件', module)
  .addDecorator(withInfo)
  .addParameters({
    info:{
      text: `
      this is a very good comp
      `,
      inline: true
    }
  })
  .add('默认 Button', defaultButton)
  .add('不同尺寸 Button', sizeButton)
  .add('不同模式 Button', typeButton)