Question

我正在将Storybook 5.2.6用于带有Typescript 3.5.3的React 16.9.0，并使用Material UI主题组件。添加并配置了@ storybook / addon-docs的Storybook Docs页面后，当使用@ material-ui中的样式包裹组件时，PropsTable中将显示“无法读取未定义的属性'classes'，未定义的类”。

组件：

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注入了，所以我现在很困惑如何解决此问题？

Answer 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(/* ... */);

故事书：Addon-Docs无法读取未定义的属性``类''

1 个答案: