You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.27 13:37:26