Styling reacts material-ui tabs

Question

I just started to use reacts material-ui and I would like to customize some styles. For example changing tabs background color.

trying to use inlineStyle

like

<Tabs style={this.getStyles().tabs} > </Tabs>

    getStyles(){
        return {

          tabs: {
            backgroundColor: Colors.teal200
          },

          headline: {
            fontSize: '24px',
            lineHeight: '32px',
            paddingTop: '16px',
            marginBottom: '12px',
            letterSpacing: '0',
            fontWeight: Typography.fontWeightNormal,
            color: Typography.textDarkBlack,

          }
        }
    }

changes tabs content area but not the header.

here we have some color attributes how we use it? The Docs gives no examples in this case.

How do I proceed?

Answer 1

The way I do it is to override the <Tab> style (if you have a controlled Tabs)

render: function() {

  var styles = {
    default_tab:{
      color: Colors.grey500,
      backgroundColor: Colors.grey50,
      fontWeight: 400,
    },
    active_tab:{
      color: Colors.deepOrange700,
    }
  }

  styles.tab = []
  styles.tab[0] = styles.default_tab;
  styles.tab[1] = styles.default_tab;
  styles.tab[2] = styles.default_tab;
  styles.tab[this.state.slideIndex] = objectAssign({},   styles.tab[this.state.slideIndex], styles.active_tab);

  return (
    <Tabs>
      <Tab style={styles.tab[0]} label="Tab 0" value="0" />
      <Tab style={styles.tab[1]} label="Tab 1" value="1" />
      <Tab style={styles.tab[2]} label="Tab 2" value="2" />
    </Tabs>
  )

Though I think the better way is to have more props for Tabs/Tab so we can customize it.

Answer 2

So if anybody would face the same here is what I found

with ThemeManager we can change style outputs

for example

ThemeManager.setTheme(ThemeManager.types.DARK);

changing specific style variables with setPalette

componentWillMount() {
        ThemeManager.setPalette({
          accent1Color: Colors.indigo50,
            primary1Color: "#474B4E",
            primary2Color: "#2173B3",
            primary3Color: "#A9D2EB",
            accent1Color: "#ED3B3B",
            accent2Color: "#ED2B2B",
            accent3Color: "#F58C8C"
        });
     }

Answer 3

The most convenient way to customize the component is to simply apply plain old CSS by using the className attribute, since the capabilities of the provided style attributes are fairly limited.

Let's consider a straight forward example:

const MyAwesomeTabContainer = () => (
    <Tabs className="tabs-container">
        <Tab icon={<Person />} className="tab" />
        <Tab icon={<Content />} className="tab" />
    </Tabs>
);

The following LESS code (not CSS!) would allow you to customize the style according to your needs:

.tabs-container {
  >div:first-child { // modifies the background color
    background-color: #f6f6f6 !important;
  }

  >div:last-child { // changes the distance between tabs and content
    margin-top: 10px;
  }

  .tab {
    >div>div { // modifies the font size of the tab labels 
      font-size: 10px;

      svg { // modifies the color of SVG icons
        fill: #626262 !important;
      }
    }
  }
}

Unfortunately it is necessary to apply a few !important statements because the style information of the component is set inline in code.

Answer 4

For MUI (Material-UI V5) I wanted to add box shadow for tabs to look like this

You can use "component" property to pass elementType. The component used for the root node. Either a string to use a HTML element or a component. I used "Box" component:

import { Box } from '@mui/material';

...

<Tabs
  value={selectedTab}
  component={Box}
  boxShadow={3}
  onChange={changeSelectedTab}
  variant="fullWidth"
>

So now I can use all Box component properties like "boxShadow". I think it is more clean to style with properties of other MUI components.Be carefull only on "Caveat with inlining" https://mui.com/material-ui/guides/composition/#component-prop

https://mui.com/material-ui/api/tabs/#props

Answer 5

I wanted a class on the active tab, so here is a quick solution for that:

<Tabs className="pcd-tabs" onChange={this.handleChange}>
    <Tab className="pcd-tab pcd-tab0 pcd-tab-active" label="Chart" value={0} />
    <Tab className="pcd-tab pcd-tab1" label="Series" value={1} />
</Tabs>

than

handleChange = (value) => {
  document.getElementsByClassName('pcd-tab-active')[0].classList.remove('pcd-tab-active');
  document.getElementsByClassName('pcd-tab' + value)[0].classList.add('pcd-tab-active');
};