default styles for semantic-ui-react tab

Question

currently implementing the tab with custom menu items

https://react.semantic-ui.com/modules/tab#custom-menu-items

How do I style the default colors from black to grey? All I know is that if you add a menu attribute with the color set to green, it will change the active color to green but I want the inactive color to be grey and active to be green. There doesn't seem to be an obvious way to set the default color.

import React, { Component } from 'react';
import { Label, Menu, Tab } from 'semantic-ui-react';


const panes = [
    {
      menuItem: <Menu.Item key='location'><i class="marker icon"></i></Menu.Item>,
      render: () => <Tab.Pane>Tab 1 Contents</Tab.Pane>,
    },
    {
      menuItem: <Menu.Item key='messages'><i class="marker icon"></i></Menu.Item>,
      render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>,
    },
  ]

class TabBar extends Component {

    render() {
        return (
            <Tab menu = {{color: 'green'}} panes={panes} />
        );
    }
}

export default TabBar;

What about the size of the tabs? it seems I have very little control over the basic styling unless I go straight into the css file... I may just implement it myself and stop using semantic ui

Answer 1

// In index.html or wherever you're rendering your React app
// AFTER you load the semantic UI css
<link rel="stylesheet" type="text/css" href="custom.css">

Then, as @ChaseDeAnda mentioned:

// In custom.css
.ui.menu > .item:not(.active) {
  color: gray;
}

Keeping your menu={{color:'green'}} in your component.

This will override the active class that semantic UI uses and set it to be green when active.