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

Question

I'm creating ui-library for project (using Emotion), I added storybook with docs addon and I seems that storybook don't see props for styled component. How can I fix that?

"@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} />

Unfortunately props table displays:

No inputs found for this component. 

Answer 1

I had the same problem since migrating to 6.0.0-rc.29.

I installed storybook-addon-react-docgen (v 1.2.42 ) separately in package.json and now the props table has returned.

Also don't forget to add it to your addons array in main.js.

Eg my main.js is

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'
]