1

I edit my storybook with .mdx, but something wrong!

My code is as follows：

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

I can't see control in storybook.

enter image description here But if I write my story in **.stories.js ,anything is ok!

enter image description here

Can somebody help me ? Thanks!

juliomalves
  • 42,130
  • 20
  • 150
  • 146
leesgithub2019
  • 93
  • 1
  • 2
  • 5

1 Answers1

4

You have to add the story prop instead of of with the name of the story.

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


<ArgsTable story="Basic usage" />
Bart Krakowski
  • 1,655
  • 2
  • 8
  • 25
  • I tried. From the official documents, it seems that `.mdx` does not support `control`. https://storybook.js.org/docs/react/writing-docs/mdx#customizing-argtypes-with-mdx. – leesgithub2019 May 08 '21 at 02:49
  • That's weird because in our projects we are using this approach and it's working. In this link, I can't see an example with prop `story` instead of `of` prop. – Bart Krakowski May 08 '21 at 09:24
  • Really？Do I need to configure some addons? – leesgithub2019 May 09 '21 at 13:06