Styling reacts material-ui tabs - css

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');
};