Storybook+Next.js+TS：组件文本无法显示问题求助

核心问题：Story 渲染逻辑错误 #

你在ComponentTemplate.stories.tsx里的BaseTemplate定义方式有误，Template.bind({})仅绑定了函数上下文，并没有实际执行组件渲染逻辑，导致组件接收不到args里的参数，自然无法显示文本。

修复方案 #

将BaseTemplate的写法改为直接调用Template并传递参数，以下是两种可行的修正方式：

方式一：复用Template函数 #

// Import Component used in this story
import ComponentTemplate from './ComponentTemplate';

// Give Story a name and define component that belongs to this specific story
export default {
  title: 'templates/ComponentTemplate',
  component: ComponentTemplate,
  argTypes: {},
};

const Template = (args: any) => <ComponentTemplate {...args} />;

// 修正后：绑定上下文后仍需返回执行后的组件
export const BaseTemplate = Template.bind({});
BaseTemplate.args = {
  text: 'I am now visible!',
};

方式二：直接返回组件实例 #

// Import Component used in this story
import ComponentTemplate from './ComponentTemplate';

// Give Story a name and define component that belongs to this specific story
export default {
  title: 'templates/ComponentTemplate',
  component: ComponentTemplate,
  argTypes: {},
};

// 简化写法：直接返回组件并解构参数
export const BaseTemplate = (args) => <ComponentTemplate {...args} />;
BaseTemplate.args = {
  text: 'I am now visible!',
};

额外检查点 #

如果组件样式（比如Tailwind的text-red-700）也未生效，需要确保Storybook能加载全局样式：
在.storybook/preview.js文件中添加全局样式导入：

import '../styles/globals.css';

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