Styling reacts to material-ui tabs

Question

I just started using material-wi reactions, and I would like to customize some styles. For example, changing the background color of a tab.

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 the content area of ​​the tab, but not the title.

here we have some color attributes, how do we use it? In this case, Docs gives no examples.

How do I proceed?

Answer 1

I do this to override the <Tab> style (if you have 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> ) 

Although I think the best way is to have more tab / tab details so that we can customize it.

Answer 2

So if someone comes across the same, here is what I found

with ThemeManager we can change the style output

eg

 ThemeManager.setTheme(ThemeManager.types.DARK); 

modifying certain 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 configure the component is to simply apply the plain old CSS using the className attribute, since the possibilities of the provided style attributes are quite limited.

Consider a direct example:

 const MyAwesomeTabContainer = () => ( <Tabs className="tabs-container"> <Tab icon={<Person />} className="tab" /> <Tab icon={<Content />} className="tab" /> </Tabs> ); 

The following LESS code (not CSS!) Allows you to customize the style to suit 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, you need to apply several !important statements, since the style information for the component is set to code in a line.

Answer 4

I need a class on the active tab, so this is a quick solution for this:

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