Bonjour à tous,

Je suis designer, spécialisé en Design System. J'ai quelques notions en react, et je voudrais crééer un storybook d'un Design System.

Je rencontre un soucis pour récupérer l'objet children (https://mui.com/material-ui/api/button/)

Je fais un premier test sur un composant bouton :

MyButton.js

import React from "react";
import { Button as MuiButton } from '@mui/material';

export const MyButton = ({ label, children, ...rest }) => {
    return <MuiButton {...rest}>{children}</MuiButton>
}
MyButton.stories.js

import { MyButton } from "./MyButton";

export default {
    title: 'UI/MyButton',
    component: MyButton,
    argTypes: {
        children: {control: 'object'}
    }
};

const Template = (args) => <MyButton {...args} />

export const Variant = Template.bind({});
Variant.args = {
    variant: 'outlined',
    label: 'Button'
}

Sur storybook, ça ne m'affiche pas le contenu du bouton.
Par contre, si j'affiche {label} au lieu de {children}, j'affiche bien le label du bouton.

Quelqu'un aurait la solution pour que ça fonctionne également en utilisant l'objet children ?

Merci !

Aucune réponse