如何在DaisyUI中自定义菜单组件的active类样式

正确方法1：在自定义DaisyUI主题中注入CSS规则 #

DaisyUI支持在自定义主题对象里通过css字段添加专属样式，样式会和当前主题绑定：

daisyui: {
  themes: [
    {
      sunset: {
        // 继承sunset主题的全部默认配置
        ...require("daisyui/src/theming/themes")["sunset"],
        // 写入自定义样式规则
        css: {
          ".menu .menu-item.active": {
            color: "#49C5B6",
          },
        },
      },
    },
    "forest",
    "dark",
  ],
},

正确方法2：直接在Tailwind配置中扩展样式 #

如果不需要和主题绑定，直接在Tailwind的theme.extend里添加样式即可，无需修改DaisyUI的主题数组：

module.exports = {
  // ...其他Tailwind配置项
  theme: {
    extend: {
      ".menu .menu-item.active": {
        color: "#49C5B6",
      },
    },
  },
  daisyui: {
    themes: ["sunset", "forest", "dark"],
  },
}

你之前方法的问题说明 #

• 方法1错误：直接把.menu:active作为主题对象的属性无效，DaisyUI的主题对象仅用于定义颜色变量、字体等基础主题配置，不能直接写入CSS选择器规则。
• 方法2错误：你创建了myTheme但并未启用它（依然使用默认的sunset主题），且DaisyUI主题不支持用extend注入样式，所以配置不会生效。

如果遇到样式优先级被覆盖的情况，可以临时给颜色值加!important（优先通过更具体的选择器解决，不推荐滥用）：

color: "#49C5B6 !important"

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