故事书：插件文档无法读取未定义的属性“类”答案

【问题标题】：Storybook: Addon-Docs Cannot read property 'classes' of undefined故事书：插件文档无法读取未定义的属性“类”
【发布时间】：2020-03-08 10:54:15
【问题描述】：

我使用 Storybook 5.2.6 for React 16.9.0 和 Typescript 3.5.3 并使用 Material UI 主题组件。添加并配置好@storybook/addon-docs 后，Storybook Docs 页面显示：当组件使用来自@material-ui 的样式包装时，PropsTable 中的“无法读取未定义的属性'类'”。

组件：

import React, {FunctionComponent} from 'react';
import { Typography } from '@material-ui/core';
import {
  withStyles,
  WithStyles,
} from '@material-ui/core/styles';
import styles from './index.styles';

export interface IProps extends WithStyles<typeof styles> {
  message?: string;
  testId?: string;
}

const Bar: FunctionComponent<IProps> = (props) => {
  const {
    classes,
    message,
    testId = ‘test-bar',
  } = props;

  if (!message) { return null; }
  return (
    <Typography className={classes.message} data-testid={testId}>
      {message}
    </Typography>
  );
};

export default withStyles(styles)(Bar);

故事

import React from 'react';
import { storiesOf } from '@storybook/react';
import { MuiThemeProvider } from '@material-ui/core/styles';

import Bar from './index';

import theme from '../../../others/global/material-ui-theme';

storiesOf('Bar', module)
  .addDecorator(story => <MuiThemeProvider theme={theme}>{story()}</MuiThemeProvider>)
  .addParameters({ component: Bar, componentSubtitle: 'Displays the Bar with message’ })
  .add('Warning', () => <Bar message="warning" />);

在 React devtools 和 Chrome devtools 中的调试中，我可以看到这些类确实作为 props 被注入，所以我现在有点困惑如何解决这个问题？

【问题讨论】：

标签： reactjs material-ui storybook

【解决方案1】：

因此存在一种解决方法，您导出“未包装”组件并将其用作文档中的组件：

正如这里提到的： https://github.com/storybookjs/storybook/issues/8361

并在此处发表评论：https://github.com/storybookjs/storybook/issues/8435#issuecomment-547075209

例子：

export const PureBar: FunctionComponent<IProps> = (props) => {
    // ...
};

export default withStyles(styles)(PureBar);

然后在故事中，更新组件参数以定位“纯”组件：

// import both the pure and wrapped components:
import Bar, { PureBar } from './Bar'

// Add to the story:
storiesOf('Bar', module)
.addParameters({ component: PureBar, componentSubtitle: 'Displays the Bar with message’ })
.add(/* ... */);

【讨论】：