Customizing the menu component's active class in daisyUI

Question

I am using the sunset theme of DaisyUI and want to modify the text color of the active class inside the menu item.

This is what I have tried -

Approach 1

daisyui: {
    themes: [
      {
        sunset: {
          ...require("daisyui/src/theming/themes")["sunset"],
          ".menu:active": {
            color: "#49C5B6", // Replace with your custom color
          },
        },
      },
      "sunset",
      "forest",
      "dark",
    ],
  },

Approach 2

daisyui: {
    themes: [
      {
        myTheme: {
          extend: {
            // Customize the text color for the .active class
            ".menu-item.active": {
              color: "#49C5B6", // Replace with your custom color
            },
          },
        },
      },
      "sunset",
      "forest",
      "dark",
    ],
  },

If anyone has any idea about, let me know how to customize it.

Answer 1

We can look in the Daisy UI source code for the CSS of the active styling and see thus:

.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > details > summary:active {
  @apply bg-neutral text-neutral-content [@media(hover:hover)]:bg-neutral [@media(hover:hover)]:text-neutral-content;
}

The main takeaway from this is that this rule for the .active class has a specificity of 0 3 3. Your rule attempts have specificities of 0 2 0 so they would not override the above CSS rule.

You can increase the specificity of your rule greater than or equal to 0 3 3, like:

daisyui: {
  themes: [
    {
      sunset: {
        ...require("daisyui/src/theming/themes")["sunset"],
        ".menu li > *:not(ul):not(.menu-title):not(details).active": {
          color: "#49C5B6",
        },
      },
    }
  ],
},

Here, I use the same selector to ensure the same behavior of the custom CSS is the same as Daisy's CSS.

See this working in this Tailwind Play.