reactjs - 故事书：在 mdx 中使用 argtypes 没有控制权

Question

我用 .mdx 编辑我的故事书，但出了点问题！

我的代码如下：</p>

<!---Badge.stories.mdx --->

import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import Badge from '../components/Badge';

<Meta
    title="MDX/Badge"
    component={Badge}
    argTypes={{
        size: {
            name: 'size',
            description: 'Badge Size ',
            options: ['large', 'small'],
            control: {type: 'radio'},
            table: {
                type: {summary: 'string'},
                defaultValue: { summary: 'large' }
            }
        }
    }}
/>

export const Template = (args) => <Badge {...args } >信息</Badge>

# Badge

<Canvas>
  <Story name="Example" args={{
    size: 'large',
    dot: false,
    text: '5',
    overflowCount: '99'
  }}>
    {Template.bind({})}
  </Story>
</Canvas>


### API
<ArgsTable of={Badge} />

我在故事书中看不到控制。

但如果我把我的故事写进去**.stories.js ，一切都好！

有人可以帮助我吗？谢谢！

Answer 1

您必须添加story道具而不是of故事的名称。

<Canvas withSource="open">
  <Story name="Basic usage">{Template.bind({})}</Story>
</Canvas>


<ArgsTable story="Basic usage" />