reactjs - Storybook-type feil når man bruker children som en argument

Jeg prøver å bruke TS og Storybook children i args, https://storybook.js.org/docs/react/writing-stories/stories-for-multiple-components#using-children-as-an-arg

Jeg har en Button.stories.tsx:

import { ComponentStory, ComponentMeta } from "@storybook/react"

import { Button } from "./Button"

export default {
    title: "Example/Button",
    component: Button,
    argTypes: {
        backgroundColor: { control: "color" },
    },
} as ComponentMeta<typeof Button>

const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />

export const Primary = Template.bind({})
Primary.args = {
    primary: true,
    label: "Button",
}

og ButtonGroup.stories.tsx:

import { ComponentStory, ComponentMeta } from "@storybook/react"

import { ButtonGroup } from "./ButtonGroup"

import { Primary } from "../Button/Button.stories"

export default {
    title: "Example/ButtonGroup",
    component: ButtonGroup,
    argTypes: {},
}

const Template: ComponentStory<typeof ButtonGroup> = (args) => <ButtonGroup {...args} />

export const PrimaryButtonGroup = Template.bind({})
PrimaryButtonGroup.args = {
    children: (
        <>
            <Primary {...Primary.args} />
            <Primary {...Primary.args} />
        </>
    ),
}

Det er en typefeil på <Primary {...Primary.args} /> på PrimaryButtonGroup.args. Problemet er at args er valgfri, så primary og label fra Primary.args kan være undefined. Derfor kan det ikke samsvare med type for label string.

Hvordan kan jeg fikse dette problemet?

Relaterte artikler