How to change the color scheme for Material UI tabs?

user_4407572 0
Viewed 751

I'm looking to change the color scheme for Material UI Tab, with white background and green indicator and text.

Here's what i did as of now,

demo.js

import React from "react";
import PropTypes from "prop-types";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import { orange, pink, green, lightGreen } from "@material-ui/core/colors";

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired
};

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      indicator: {
        backgroundColor: green[700]
      }
    },
    MuiTab: {
      root: {
        "&:hover": {
          backgroundColor: "#FFFFFF",
          color: green[700]
        }
      },
      selected: {
        backgroundColor: "#FFFFFF",
        color: green[700],
        "&:hover": {
          backgroundColor: green[100],
          color: green[700]
        }
      }
    }
  }
});

class SimpleTabs extends React.Component {
  state = {
    value: 0
  };

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <MuiThemeProvider theme={theme}>
        <div>
          <AppBar position="static">
            <Tabs value={value} onChange={this.handleChange}>
              <Tab label="Item One" />
              <Tab label="Item Two" />
              <Tab label="Item Three" href="#basic-tabs" />
            </Tabs>
          </AppBar>
          {value === 0 && <TabContainer>Item One</TabContainer>}
          {value === 1 && <TabContainer>Item Two</TabContainer>}
          {value === 2 && <TabContainer>Item Three</TabContainer>}
        </div>
      </MuiThemeProvider>
    );
  }
}

SimpleTabs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default SimpleTabs;

And the index.js


import React from 'react';
import { render } from 'react-dom';
import Demo from './demo';

const rootElement = document.querySelector('#root');
if (rootElement) {
  render(<Demo />, rootElement);
}

As of now, the Tabs shows the intended color scheme but doesn't stay that way, only hovering over shows the White-Green color scheme. Also it has a blue background over Tabs, that i want to change to white as well.

I have taken reference form an earlier answer and did the changes. Here is the codesandbox link - https://codesandbox.io/s/mui3-how-to-override-tab-theme-forked-qexyf?file=/index.js:0-205

material-ui
2 Answers

See improved LIVE example and overriden config below with comments

enter image description here

const theme = createMuiTheme({
  overrides: {
    MuiTabs: {
      root: {
        backgroundColor: "#FFFFFF" // overrides blue background for panel
      },
      indicator: {
        backgroundColor: green[700]
      }
    },
    MuiTab: {
      root: {
        "&$selected": { // proper way for styling selected tab
          color: green[700],

          "&:hover": {
            backgroundColor: green[100],
            color: green[900]
          }
        }
      },
      wrapper: { // styles tab value
        color: green[500]
      }
    }
  }
});

Errors in console (in your example) already had some useful tips. Follow them and make changes according documentation enter image description here

Please, let me know if it works or not )

user_51240090

MUI is showing the theme on hover because you specified:

MuiTab: {
  root: {
    "&:hover": {
      // hover theme here ...
    }
  }
}

Note the &:hover specified under MuiTab-root.

To get the theme displaying for the selected item, try this:

MuiTab: {
  root: {
    "&$selected": { // or "&.Mui-selected" in your example
      // selected theme here ...
    }
  }
}

See: Use $ruleName to reference a local rule within the same style sheet

You should also take a look at the console for some helpful logs:

Material-UI: The `MuiTab` component increases the CSS specificity of the `selected` internal state.
You can not override it like this: 
{
  "root": {
    ... // shortened for brevity
  },
  ..., // shortened for brevity
  "selected": {
    ... // shortened for brevity
  }
}

Instead, you need to use the $ruleName syntax:
{
  "root": {
    "&$selected": {
      ... // shortened for brevity
    }
  }
}
user_160725430
Related