Question

我正在使用MaterialUI，为了创建自定义库，我对其进行了一些修改（样式/逻辑）。我还使用Storybook（带有Typescript）来创建文档。

我面临的问题是，故事书的餐桌道具并非总是自动生成的。它仅显示我添加的道具，但没有显示由材质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

好吧，我必须进行彻底调试，发现使用此过滤器的docgen的打字稿default configuration排除了node_modules中的所有类型

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;
      },
    },
  },
};

故事书中缺少MaterialUI表道具

1 个答案: