reactjs - Storybook 中缺少 MaterialUI 表 Prop

Question

我正在使用我稍微修改(样式/逻辑)以创建自定义库的 MaterialUI。我还使用 Storybook(带有 Typescript)来创建文档。
我面临的问题是故事书表格 Prop 并不总是自动生成的。它只显示我添加的 Prop ，但没有显示 Material UI 构建的 Prop 。例如:

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 排除所有类型对于带有此过滤器的 docgenpropFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),但是，出于某种原因，可能是 MuiButtonProps 类型的编写方式，prop.parent对于 MuiButton Prop 未定义并让它们通过。
由于您想包含所有 MaterialUI 的 Prop ，您可以修改 .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;
      },
    },
  },
};