故事书中缺少MaterialUI表道具

Question

我使用的是MaterialUI，为了创建一个自定义库，我对它进行了一些修改(样式/逻辑)。我还使用Storybook (带有打字本)来创建文档。

我面临的问题是，故事书的道具并不总是自动生成的。它只显示了我添加的道具，但是没有一个是由material构建的。例如：

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完美地工作，这是非常奇怪的。我搞不懂为什么纸业不起作用。

​

​

Answer 1

好吧，我要彻底调试它，并发现类型记录的默认配置用这个过滤器从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;
      },
    },
  },
};