Firstly, when inspecting the DOM structure
<div class="MuiTabs-root Tabs" aria-label="tabs example">
<div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
<div class="MuiTabs-flexContainer" role="tablist">
</div>
</div>
</div>;
You will notice that the required className is MuiTabs-flexContainer (not tabFlexContainer)
For instance, in Tabs, all classNames can be found in the MUI Tabs CSS API
Various solutions are available to fully override, besides the typical withStyles and makeStyles:
1.Answer from Material-UI
1.1 Utilize the internal MUI style Higher-Order Component withStyles for complete component overriding.
Using the concept of 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);
https://i.sstatic.net/8f1UA.png
1.2 Apply normal createStyles or makeStyles style solution
Traditional component
withStyles (Higher-Order function) + createStyles
Functional aspect
useStyles (hooks) + makeStyles
Further details at:
2.Style Solution using Styled-Components
If you prefer utilizing separate CSS files to style MUI components
You can explore styled-components
styled-components allows you to write actual CSS code to style your components.
Implementation:
import styled from 'styled-components';
import { Tabs, Tab, withStyles } from "@material-ui/core";
const StyledTabs = styled.Tabs`
font-size: 1.5em;
...
`;
3.Pure CSS Approach
Refer: css_selectors
import "./styles.css";
div.MuiTabs-flexContainer {
background: linear-gradient(45deg, red 30%, #ff8e53 90%);
}
https://i.sstatic.net/ZyNET.png
https://codesandbox.io/s/gallant-keller-kwtvj?fontsize=14&hidenavigation=1&theme=dark