如何在 Storybook 6.0.0 中显示道具类型表答案

【问题标题】：How to display props type table in storybook 6.0.0如何在 Storybook 6.0.0 中显示道具类型表
【发布时间】：2020-07-14 11:35:21
【问题描述】：

我正在为项目创建 ui-library（使用 Emotion），我添加了带有 docs 插件的故事书，我似乎没有看到该故事书的样式组件的道具。我该如何解决？

"@storybook/addon-docs": "^6.0.0-rc.3",
"@storybook/addon-knobs": "^6.0.0-rc.3",
"@storybook/react": "^6.0.0-rc.3",

// main.js


module.exports = {
  stories: ["../src/**/*.stories.@(tsx|mdx)"],
  // Add any Storybook addons you want here: https://storybook.js.org/addons/
  addons: ["@storybook/addon-docs", "@storybook/addon-knobs/register"],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../"),
    });

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve("babel-loader"),
      options: {
        presets: [["react-app", { flow: false, typescript: true }]],
      },
    });

    config.resolve.extensions.push(".ts", ".tsx");

    return config;
  },
};

// Example.ts:

import { ExampleProps } from "./Example.types";

export const Example = styled.div<ExampleProps>`
  color: ${(props) => props.color || "red"};
`;

export default Example;

// Example.stories.mdx

import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import { withKnobs, color } from "@storybook/addon-knobs";
import Example from "./Example";

<Meta title="Example" component={Example} decorators={[withKnobs]} />

# Preview

<Preview>
  <Story name="Example">
    <Example color={color('color', '#000', 'GROUP-ID1')}>Example</Example>
  </Story>
</Preview>

# Props

<Props of={Example} />

不幸的是道具表显示：

No inputs found for this component.

【问题讨论】：

我在让事情正常工作时遇到问题，但我使用的是 Flow 而不是 Typescript 的类型。但是，这可能会有所帮助，我知道这是我自己查看文档时错过的东西。在您的 MDX 故事中，不要使用 <Props of={Example} /> 语法，而是尝试使用 <Props story='Example' />。请注意，我们将of 替换为story 并且值变成了故事的名称（在标记中使用）作为字符串而不是组件本身。我希望这会有所帮助。我知道它对我有用，因为 <Props of={Example} /> 语法根本不起作用。

标签： javascript reactjs storybook

【解决方案1】：

自从迁移到 6.0.0-rc.29 后，我遇到了同样的问题。

我在 package.json 中单独安装了storybook-addon-react-docgen (v1.2.42)，现在 props 表已经返回。

另外不要忘记将它添加到 main.js 中的插件数组中。

例如我的 main.js 是

module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'],
addons: [
    '@storybook/addon-docs',
    '@storybook/addon-links',
    '@storybook/preset-create-react-app',
    '@storybook/addon-knobs/register',
    'storybook-addon-react-docgen'
]

【讨论】：