Overriding the material-UI style not working

Question

I am new to the material UI. Here, I am trying to override the CSS of material UI tabs component.

Answer 1

First of all, if you check the DOM structure

  

    

    
  
;

You would find out that the demand className is MuiTabs-flexContainer (rather than tabFlexContainer)

Example: For Tabs, all the className can be found in the MUI Tabs CSS API

---

There are many solutions, except normal withStyles and makeStyles, for fully override:

1.Material-UI solution

1.1 Use MUI internal style HOC withStyles to fully override the component.

Using nesting selector

import { Tabs, Tab, withStyles } from "@material-ui/core";

const StyledTabs = withStyles({
  root: {
    background: "light-blue",
    ...
    boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
    "& div.MuiTabs-scroller": {
      "& .MuiTabs-flexContainer": {
        background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"
      }
    }
  }
})(Tabs);

---

1.2 Use normal createStyles or makeStyles style solution

Classical component
withStyles (High order function) + createStyles

Functional component
useStyles (hooks) + makeStyles

Refer in details: https://stackoverflow.com/a/60736142/11872246

---

2.Styled-Components solution

If you want to use separate CSS files to style MUI component

You can try styled-components

styled-components allows you to write actual CSS code to style your components.

Usage:

import styled from 'styled-components';
import { Tabs, Tab, withStyles } from "@material-ui/core";

const StyledTabs = styled.Tabs`
  font-size: 1.5em;
  ...
`;

---

3.Separate Pure CSS solution

Refer: css_selectors

import "./styles.css";

div.MuiTabs-flexContainer {
  background: linear-gradient(45deg, red 30%, #ff8e53 90%);
}