Storybook里组件显示空白但本地运行正常怎么办？

公孙沐言提问于 2026-01-26 14:14:24 阅读 130

框架

刚用@storybook/react创建了一个按钮组件，写好stories后预览页面全是空白，控制台没有报错。试过npm rebuild和清除缓存还是不行，但直接在项目里运行这个组件又是正常的

这是我的组件代码：

import React from 'react';

export const Button = ({ label }) => (
  <button className="rounded-lg bg-blue-500 text-white px-4 py-2">
    {label}
  </button>
);

对应的stories.js内容：

import { Button } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

export const Primary = () => <Button label="Click me"/>;

我来解答赞 4 收藏

反馈

1 条解答

码农英旭 Lv1

Storybook 默认不会自动加载 CSS，我一般直接在 preview.js 里全局引入样式文件。试试在 .storybook/preview.js 加这段代码：

import "tailwindcss/dist/default.css"; // 根据你的项目路径调整

export const parameters = {

  actions: { argTypesRegex: "^on[A-Z].*" },

  controls: {

    matchers: {

      color: /(background|color)$/i,

      date: /Date$/,

    },

  },

};

如果还没生效，检查下组件路径和 stories 配置是不是写错了，有时候就是手抖打错了字。

2026-01-30 10:03