Flowbite-React v0.4.11主题自定义（Option3）失效，求排查方案

我按照Flowbite-React的「创建可复用的自定义主题组件」指南操作，但无法实现预期效果，当前使用版本为"flowbite-react": "^0.4.11"，我的代码如下：

"use client";

import { Button } from "flowbite-react";

const customTheme = {
    color: {
        primary: "bg-red-500 hover:bg-red-600",
    },
};

export default function MyButton({ children, ...props }) {
    return (
        <Button theme={customTheme} {...props}>
            {children}
        </Button>
    );
}

你的问题出在主题结构不符合flowbite-react 0.4.11版本的规范，这个版本的组件主题需要以组件名称作为顶层键，而非直接用color。

调整自定义主题结构即可生效：

"use client";

import { Button } from "flowbite-react";

// 适配0.4.x版本的正确主题结构
const customTheme = {
  button: {
    color: {
      primary: {
        base: "bg-red-500",
        hover: "hover:bg-red-600",
        // 可选：补充其他状态的样式
        active: "active:bg-red-700",
        focus: "focus:ring-red-400"
      }
    }
  }
};

export default function MyButton({ children, ...props }) {
  // 需传递color="primary"才会触发自定义样式
  return (
    <Button theme={customTheme} {...props}>
      {children}
    </Button>
  );
}

关键说明： #

• 0.4.11版本的Flowbite-React组件主题必须以组件名（如button）作为顶层对象键，内部再嵌套color、size等配置项
• 每个颜色变体（如primary）需要拆分为base、hover、active等独立状态的类名，不能直接写一串复合类名
• 使用自定义组件时，记得传递color="primary"属性，否则会沿用默认样式

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