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

编程问答 2022-05-03

问题描述

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

我的代码如下：

<!---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} />

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

enter image description here

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

enter image description here

有人可以帮我吗？ 谢谢！

解决方法

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

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


<ArgsTable story="Basic usage" />
controlscontrolscontrolsmdxjsreactjsreactjsreactjsreactjsstorybook