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?
You can customize the Tab style by overriding its header and active tab CSS classes. Define HTML string for adding animation and customizing the Tab header and pass it to text property. Now you can override the style using custom CSS classes added to the Tab elements.
The Material UI Tabs Component We can use the Tabs component from Material UI to create a group of tabs. It has a value prop that sets the currently selected tab using its zero-based index. The Tab component creates each tab. Its label prop sets the tab title.
You can add dynamic tabs by reusing the content using React template. Tabs can be added dynamically by passing array of items and index value to the addTab method. Content reuse can be achieved by using the following steps: Declare a template within the function returns jsx element.
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.
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"
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With