如何在Storybook中应用Flowbite自定义主题？React/TS集成报错

问题复现 #

使用Flowbite作为React/TypeScript项目的UI库，已完成Tailwind和Storybook的安装。在App组件中通过Flowbite组件包裹自定义主题可正常生效，但在.storybook/preview.ts中配置装饰器时出现报错：

Parsing error: '>' expected.
Flowbite' refers to a value, but is being used as a type here. Did you mean 'typeof Flowbite'?

核心原因 #

.storybook/preview.ts是纯TypeScript文件，默认不支持JSX语法解析，导致编译器无法识别<Flowbite>这类JSX标签，进而将组件错误判定为类型。

解决步骤 #

1. 修改预览文件后缀为.tsx
   将.storybook/preview.ts重命名为.storybook/preview.tsx，让TypeScript正确解析文件中的JSX代码。

2. 修正装饰器代码
   更新后的preview.tsx代码示例：

import type { Preview, Story } from "@storybook/react";
import "../src/index.css"; 
import { Flowbite } from "flowbite-react";
import { customTheme } from "../src/theme.ts"; // 确保主题文件路径正确

const preview: Preview = {
  decorators: [
    (Story: Story) => (
      <Flowbite theme={{ theme: customTheme }}>
        <Story />
      </Flowbite>
    ),
  ],
};

export default preview;

3. 验证Tailwind配置完整性
   确保tailwind.config.ts中已包含Flowbite的内容路径，否则自定义主题样式无法生效：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("flowbite/plugin")],
};

4. 确认样式导入
   检查src/index.css中是否已导入Tailwind基础样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

验证 #

重启Storybook服务后，所有Story都会被Flowbite组件包裹，自定义主题样式将正常应用。

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