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

You'll have to overwrite the CSS for .ui.menu > .item:not(.active) and give it color: gray. — Chase DeAnda
– Chase DeAnda, Commented Jan 29, 2018 at 20:27

Mitch Lillie · Accepted Answer · 2018-01-29 21:01:17Z

4

// 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.

answered Jan 29, 2018 at 21:01

Mitch Lillie

2,43721 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

james Over a year ago

thanks. What about the actual size of the tabs? I saw that there was a { paneWidth: 12, tabWidth: 4 } option under "grid" attribute. But it doesn't seem to do anything and there's no documentation on tabWidth

Mitch Lillie Over a year ago

Styling is just CSS. Either 1. dig into the semantic-ui source code or documentation, 2. open your browser console, inspect the element you want to change, and play with some different values, or 3. post a new question

Collectives™ on Stack Overflow

default styles for semantic-ui-react tab

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related