Storybook 中缺少 MaterialUI Table 个道具

Question

我正在使用 MaterialUI，我稍微修改了它 (styling/logic) 以创建自定义库。我也在使用 Storybook（带有 Typescript）来创建文档。

我面临的问题是故事书 table 道具并不总是自动生成。它只显示我添加的道具，但 none material UI 构建的道具。例如：

import * as React from "react";
import MuiPaper from "@material-ui/core/Paper";
import clsx from "clsx";

export interface PaperProps extends MuiPaperProps {
    /**
     * If `true`, a darker background will be applied.
     * @default false
     */
    filled?: boolean;
    /**
     * If `true`, the border around the Paper will be removed.
     * @default false
     */
    disableOutline?: boolean;
}

const useStyles = makeStyles((theme: Theme) => ({
    root: {
        borderRadius: "8px",
        border: `1px solid ${theme.palette.grey[200]}`,
        "&$filled": {
            backgroundColor: theme.palette.grey[100],
        },
        "&$disableOutline": {
            border: "none",
        },
    },
    /* Pseudo-class applied to the root element if `disableOutline={true}`. */
    disableOutline: {},
    /* Pseudo-class applied to the root element if `filled={true}`. */
    filled: {},
}));

export const Paper: React.FC<PaperProps> = (props) => {
    const { disableOutline = false, filled = false, ...restProps } = props;
    const classes = useStyles();
    return (
        <MuiPaper
            classes={classes}
            className={clsx(classes.root, {
                [classes.disableOutline]: disableOutline,
                [classes.filled]: filled,
            })}
            {...restProps}
        />
    );
};

截图

另一方面，它与非常奇怪的 MuiButton 完美配合。我不明白为什么它不适用于 Paper。

Answer 1

好吧，我必须彻底调试它并发现 typescript 的 default configuration 使用此过滤器

排除了来自 node_modules for docgen 的所有类型

propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),

但是，由于某些原因，可能是 MuiButtonProps 类型的写法，prop.parent 未定义 MuiButton 道具，让它们通过。

因为你想包含所有 MaterialUI 的道具，你可以这样修改 .storybook/main.js 中的默认过滤器：

module.exports = {
  ...
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => {
        return prop.parent
          ? /@material-ui/.test(prop.parent.fileName) ||
              !/node_modules/.test(prop.parent.fileName)
          : true;
      },
    },
  },
};

Storybook 中缺少 MaterialUI Table 个道具

Missing MaterialUI Table Props in Storybook

typescript

reactjs

material-ui

storybook