ReactFix
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • React
  • React Native
  • Programming
  • Object Oriented Programming

Saturday, November 12, 2022

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

 November 12, 2022     reactjs, semantic-ui   

Issue

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.

href="https://codesandbox.io/s/semantic-ui-example-forked-muho2n?file=/example.js" rel="nofollow noreferrer">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 ?


Solution

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" enter image description here

One of the Solution(s):

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

Hope this helps.



Answered By - Rohit Khanna
Answer Checked By - - Marie Seifert (ReactFix Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Newer Post Older Post Home

Featured Post

Is Learning React Difficult?

React is difficult to learn, no ifs and buts. React isn't inherently difficult to learn. It's a framework that's different from ...

Total Pageviews

Copyright © ReactFix