Storybook Vite中Mantine扩展Props未显示的问题求助
如何让Storybook同时展示自定义Props和Mantine原生Props
我封装了基于Mantine的TextInput组件,希望在Storybook的Props面板中同时显示自定义的Props以及所有Mantine原生的TextInput Props,但目前只显示我自定义的那些,Mantine的原生Props都没展示出来。
我的类型文件
import { InputVariant, TextInputProps as MantineTextInputProps, } from '@mantine/core'; export type MantineTextInputPropsType = MantineTextInputProps & React.RefAttributes<HTMLInputElement>; export interface TextInputProps extends MantineTextInputPropsType { title: string; description?: string; onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; disabled?: boolean; variant?: InputVariant; isRequired?: boolean; maxLength?: number; value?: string; }
我的Storybook文件
import { Meta, Story } from '@storybook/react'; import { ChangeEvent, useState } from 'react'; import { TextInput as StoryBookTextInput } from './'; import { TextInputProps } from './TextInput'; export default { title: 'core/atoms/textInputs/TextInput', component: StoryBookTextInput, } as Meta; const Template: Story<TextInputProps> = ({ ...args }) => { const [value, setValue] = useState(''); const onChange = (e: ChangeEvent<HTMLInputElement>) => setValue(e.currentTarget.value); return <StoryBookTextInput value={value} onChange={onChange} {...args} />; }; export const TextInput = Template.bind({}); TextInput.args = { title: 'Title', description: 'This is the description', disabled: false, gainsightId: 'text-input', placeholder: 'Placeholder text', };
当前问题表现
现在Storybook仅展示以下自定义Props,Mantine的原生Props完全未显示:
title: string; description?: string; onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void; disabled?: boolean; variant?: InputVariant; isRequired?: boolean; maxLength?: number; value?: string;
已尝试的方案
我试过在Vite插件和Storybook配置中使用react-docgen-typescript相关工具,包括@joshwooding/vite-plugin-react-docgen-typescript、react-docgen-typescript-vite-plugin等插件,也调整过多种react-docgen的配置,但问题仍未解决。
内容的提问来源于stack exchange,提问作者Snivio
相关产品推荐
相关产品推荐

