Material-ui: Is there any way to override the tabs background yet preserves theme properties

Created on 10 Aug 2015  路  4Comments  路  Source: mui-org/material-ui

What I am trying to achieve is to make the tabs background color transparent and for the light theme the lable color is black and for dark theme the lable color is white. Is there any way to achieve this without doing a dirty hack?

v0.x

Most helpful comment

For anyone stumbling upon this thread, a full list of overrides can be found here:
https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js

All 4 comments

Define your own theme (very easy to do) and use them instead of the one of material UI.
The code to apply your theme in your component is is the following :聽

let YourTheme = require('../styles/themes/your-theme.js');
let ThemeManager = new Styles.ThemeManager().getCurrentTheme();
ThemeManager.setTheme(YourTheme);

For your theme, copy / paste the light/dark theme of material UI in your src folder and modify the tab background :

tabs: {
        backgroundColor: palette.primary1Color,
        opacity: '0';
      },

and the textColor :

textColor: Colors.darkBlack,

I have not tried this code, but use this technique to make my own theme.
Tell me if it works for you.

Yeah, one way to do it is to have your own custom theme. But it would be nice to override the tabs root styles, which passes down to the child prop styles.

Amyway, closing this issue since we can have it controlled by defining custom themes.

For anyone stumbling upon this thread, a full list of overrides can be found here:
https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js

For anyone stumbling upon this thread, a full list of overrides can be found here:
https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js

The link is broken

Was this page helpful?
0 / 5 - 0 ratings