修复Storybook中仅调试用theme单选控件无选项问题

1. 分离Story专属参数与组件Props #

在模板函数里把theme从args中单独解构出来，只将组件支持的props传递给Text组件，避免无效props传递给不接受它的组件：

const Template = ({ theme, ...textProps }) => {
    return (
        <ThemeProvider theme={theme === 'dark' ? theme.dark : theme.light}>
            <GlobalStyles />
            <Text {...textProps}></Text>
        </ThemeProvider>
    );
};

2. 修正Theme参数的ArgTypes配置 #

完善theme的argTypes配置，还可以标记它为Story专属参数，让它在控制面板中更清晰：

argTypes: {
    children: { type: 'string' },
    theme: {
        control: {
            type: 'inline-radio',
            options: ['dark', 'light']
        },
        // 可选：将theme归类到自定义分组，和组件props区分开
        table: {
            category: 'Story调试控件'
        }
    },
    size: {
        control: {
            type: 'inline-radio',
            options: ['small', 'medium', 'large', 'huge']
        }
    },
    uppercase: { type: 'boolean' }
},

3. 确保Args中的Theme值有效 #

保持args里的theme: 'dark'不变，确保它是options数组中的有效值，这样控件就能正确渲染选项。

完整修改后的Story代码 #

const meta = {
    title: 'Text',
    component: Text,
    args: {
        children: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. \n        Libero inventore ad dicta obcaecati quisquam dignissimos est quas, autem explicabo \n        facilis laboriosam expedita, aliquid sequi dolores voluptatum illum maiores, \n        repudiandae cupiditate.',
        theme: 'dark',
        size: 'medium',
        uppercase: false,
    },
    argTypes: {
        children: { type: 'string' },
        theme: {
            control: {
                type: 'inline-radio',
                options: ['dark', 'light']
            },
            table: {
                category: 'Story调试控件'
            }
        },
        size: {
            control: {
                type: 'inline-radio',
                options: ['small', 'medium', 'large', 'huge']
            }
        },
        uppercase: { type: 'boolean' }
    },
    
};

export default meta;

const Template = ({ theme, ...textProps }) => {
    return (
        <ThemeProvider theme={theme === 'dark' ? theme.dark : theme.light}>
            <GlobalStyles />
            <Text {...textProps}></Text>
        </ThemeProvider>
    );
};

export const Text_Dark = {
    render: Template,
}

问题根源与修复逻辑 #

之前的代码中，{...args}会把theme传递给不接受该props的Text组件，干扰了Storybook的props校验逻辑，导致控件渲染异常。通过解构分离theme，既保留了Story调试时的主题切换功能，又避免了无效props传递；同时明确配置theme的控制属性，让Storybook识别这是一个Story专属参数，而非组件本身的props，从而正确渲染单选控件。

内容的提问来源于stack exchange，提问作者Rafael