Help. Documentation request for customizing components.

[sergioavazquez]

Version 1.0.0.beta.22
Question:
I'm trying to customize a 'Tabs' element but the only references to customization I see in the API are indicatorColor and textColor. Only two options, 'primary' and 'accent'. How do I set up a background color? How do I choose for example primary[500] for the accent?

I read the entire docs here: https://material-ui.com/
I don't need much versatility, I don't need exceptions or anything like that. I just need something like the export code I get from here: https://cimdalli.github.io/mui-theme-generator/

I love the idea of the library, but I can't choose which colors go where... Could you point me in the right direction?

Thanks in advance,

[sergioavazquez]

@pelotom Do you have an example on how to achieve this? Am I misinterpreting how the library should be used? Should I try using v0.x instead?

[pelotom]

@sergioavazquez You want to style it with JSS using the theme callback. Take a look at

https://material-ui.com/customization/css-in-js/#material-ui-39-s-styling-solution

[sergioavazquez]

Thanks!! @pelotom.
I'm going to try it!
Is this the only way to specify colors? Will there be a simpler way to achieve this in the future?

[mbrookes]

Also: https://material-ui.com/customization/themes/

[sergioavazquez]

@mbrookes This last example makes more sense to me, but how do you choose which primary and which secondary color is set? not just purple, but purple[600] for example.

I was hoping I would be able to generate my base UI settings like those exported for the previous version: https://cimdalli.github.io/mui-theme-generator/

const uiSettings = {
    "tabs": {
        "backgroundColor": "rgba(255, 255, 255, 0.01)",
        "selectedTextColor": "rgba(255, 255, 255, 0.95)",
        "textColor": "rgba(255, 255, 255, 0.55)"
    }
}

Then create a theme based on it like this: const theme =createMuiTheme(uiSettings)
Provide that theme with <MuiThemeProvider theme={theme}>

Maybe this is not the how the library is intended to work anymore. Do I have to wrap a component and inject styles, use JSS just to specify which color I want to use for a Tab background for example?

If that's the case, it might not be the right fit for the project I'm working on.

Thanks for your time!

[mbrookes]

@sergioavazquez Sound like all you need is here: https://material-ui.com/customization/overrides/

No you don't have to use JSS - you can use any other CSS in JS solution, or even plain old CSS. For something as simple as the background color on a tab, even inline styles will work.

<Tabs value={value} onChange={this.handleChange}>
    <Tab label="Item One" style={{ backgroundColor: 'orange' }} />
    <Tab label="Item Two" />
    <Tab label="Item Three" href="#basic-tabs" />
</Tabs>

[pelotom]

There’s an open issue for the ability to specify a level in addition to primary/accent. The existing system is already very flexible and powerful though. In particular I’d recommend taking a look at what you can do with overrides.

[mbrookes]

I’d recommend taking a look at what you can do with overrides.

That's what I said^^. 😄

Finally @sergioavazquez - the examples in the docs wrap the taps in AppBar, which has the color prop.

[pelotom]

@mbrookes sorry, skim-reading failure 😛

[sergioavazquez]

You are right, I got it to work. Just in case someone has the same doubts I did, here's what finally worked for me to override a component style based on a theme.
Component code:

...
import { defaultTheme } from '../config/default-theme'  // Default theme definition
import {  withStyles, createMuiTheme } from 'material-ui/styles';

const theme = createMuiTheme(defaultTheme);
const styleOverride = {
      root:{
        background: theme.palette.primary[200], //Override based on theme's pallete.
      }
    };

class CustomTabComponent extends Component {
   render(){
      const { classes } = this.props;
      <Tab classes={{ root: classes.root }} ... ></Tab>
   };
}
export default withStyles(styleOverride)(CustomTabComponent)

With this approach I can control colors from the theme definition and override just which color of the palette needs to be used in which element. Meaning that if I change my theme definition from 'red' to 'blue' my component will change accordingly, unlike what would've happen if I would've overridden with a specific color instead.

Thank you all for replying so quickly!

[pelotom]

@sergioavazquez FYI you can also get the theme using a callback:

import {  withStyles } from 'material-ui/styles';

const styleOverride = theme => ({
  root:{
    background: theme.palette.primary[200], //Override based on theme's pallete.
  }
});

class CustomTabComponent extends Component {
   render(){
      const { classes } = this.props;
      <Tab classes={{ root: classes.root }} ... ></Tab>
   };
}
export default withStyles(styleOverride)(CustomTabComponent)

[sergioavazquez]

Well @pelotom, that makes it perfect! Creating the theme every time was not ideal...

[mbrookes]

Creating the theme every time was not idea

Normally you would only need to create it once at the top of you component tree.

[sergioavazquez]

I was able to make that work, no problem. But how do I target the accent or ripple color for example?

For what I understand, every class that has ...-root-... on it, will be affected by my override. Changing background and font color is easy unless you wan't a bit of granularity. i.e. active font color, disabled font color, ripple color etc. The ripple and all font's have matching colors, since I've overridden root's property, color.

I read Tabs API docs, and tested buttonAuto instead of root as target. It works for changing background and font color but not accent.

I changed my componen name to MuiTabs but no luck either..

Am I missing something?

[mbrookes]

Right, so that's where you have to walk through the levels of specificity (to borrow that word from CSS) of the speficic component, or specific component instance you wish to target. The docs cover pretty much every eventuality.