How to add custom color to menu in tab - Semantic UI React

Question

I am trying to add custom color to menu on tabs , I want color to fill the entire menu , currently this menu is in tab and I wanted a custom color to be added on top of it.

current code

if you see the above code default colors like red and orange works fine but when i try to add a custom color the entire menu turns black. how i can resolve this ?

Answer 1

The problem is:

Semantic UI adds a class to the menu with the "color-name" that is passed to color prop. See the image below when we pass a custom color instead of a "pre-defined color class"

One of the Solution(s):

className attribute to menu props and define the custom css for that className. Updated Sandbox

Hope this helps.