Question: setComponentThemes equivalent in 0.12

[tristangodfrey]

Hi guys, I've recently updated to material-ui 0.12 so I could utilise the updated tab components, however I'm slightly confused by the changes in the theme system. I used to be able to do this:

ThemeManager.setComponentThemes({
      raisedButton: {
        color: colours.anneGreen,
        textColor: 'white'
      }
    });

However this seems to have been deprecated, and I can't find any examples of setting component-specific styles. Do I have to create a custom component with inline styles in order to do this, or is there a new way?

Thanks in advance.

[sothychan]

Are you using a custom theme or a built in theme? If you are not using a custom theme, I highly recommend that you do. I have a custom theme and I'm setting it using my custom theme. So here's how it would look in your case. Let's assume you have a custom theme, and in that custom theme, you set those properties in the raisedButton object. You've also used Theme Manager to set your custom theme. So now in your component code, require your custom theme "require('path/to/custom/theme.js')"

Then do this, CustomTheme.ComponentThemes(CustomTheme.palette, CustomTheme.spacing).raisedButton;

These are the functions available to us in material-ui 0.12 via ThemeManager:

modifyRawThemeSpacing: function modifyRawThemeSpacing(muiTheme, newSpacing) {
var newRawTheme = update(muiTheme.rawTheme, { spacing: { $set: newSpacing } });
return this.getMuiTheme(newRawTheme);
},

//function to modify the palette of the raw theme. This function recomputes
//the MUI theme and returns it based on the new raw theme.
//keys inside 'newPalette' override values for existing keys in palette
modifyRawThemePalette: function modifyRawThemePalette(muiTheme, newPaletteKeys) {
var newPalette = Extend(muiTheme.rawTheme.palette, newPaletteKeys);
var newRawTheme = update(muiTheme.rawTheme, { palette: { $set: newPalette } });
return this.getMuiTheme(newRawTheme);
},

//function to modify the font family of the raw theme. This function recomputes
//the MUI theme and returns it based on the new raw theme.
modifyRawThemeFontFamily: function modifyRawThemeFontFamily(muiTheme, newFontFamily) {
var newRawTheme = update(muiTheme.rawTheme, { fontFamily: { $set: newFontFamily } });
return this.getMuiTheme(newRawTheme);
}

and none of those seem to do what you are looking for so I think custom theme is the way to go.

[tristangodfrey]

Thanks for your reply @sothychan. I am using a custom theme as specified in the docs. So I can apply my styles like this?

CustomTheme.ComponentThemes(CustomTheme.palette, CustomTheme.spacing).raisedButton = {
    padding: 100
}

[sothychan]

I haven't actually tried it like that, but give it a shot. I don't see why that wouldn't work. If that doesn't work, you need to modify the raisedButton object within your CustomTheme.js. For example, in my custom theme.js, I have this block for raisedButton:

      raisedButton: {
        color: Colors.white,
        textColor: palette.textColor,
        primaryColor: palette.primary1Color,
        primaryTextColor: Colors.white,
        secondaryColor: palette.accent1Color,
        secondaryTextColor: Colors.white,
        border: '2px solid #666',
        borderRadius: '5px',
        labelStyle: {
            textTransform: 'none',
        }
      },

so in my component I have this:

<RaisedButton label="blah" style={CustomTheme.ComponentThemes(CustomTheme.palette, CustomTheme.spacing).raisedButton} labelStyle={CustomTheme.ComponentThemes(CustomTheme.palette, CustomTheme.spacing).raisedButton.labelStyle} />

Let me know if you have any questions.

[tristangodfrey]

Ah, this isn't quite what I'm looking for. Here's a snippet from the source-code: (flat-button.jsx)

const {
      buttonColor,
      buttonHeight,
      buttonMinWidth,
      disabledTextColor,
      primaryTextColor,
      secondaryTextColor,
      textColor,
      textTransform,
    } = this.constructor.getRelevantContextKeys(this.state.muiTheme);

I'm pretty sure I can apply styles to the component without explicitly passing them as a style prop, as it should be passed through context. I just need to figure out how this works in the new version.

Update:

I've somewhat figured out how to set custom properties on the muiTheme context object, I've done it like so:

getChildContext: function() {
    var theme = ThemeManager.getMuiTheme(Theme);
    //Custom styles here temporarily
    theme.raisedButton.color = colours.anneGreen;
    theme.raisedButton.textColor = 'white';
    return {
      muiTheme: theme,
    };
  },

It works for now but I'm sure this isn't the correct solution to apply global styles to mui components.

[epferrari]

I've been working with this as well, and think the API would benefit from some more flexibility here in the form ThemeMangager.getMuiTheme() accepting an [optional] second argument: overrideComponentThemes, which would ideally be a function that returned your custom component styles at the time mui created or updated the muiTheme object. Also having a this.context.muiTheme.getPalette() method would be great as a shortcut for this.context.muiTheme.rawTheme.palette.

[tristangodfrey]

@epferrari Seems like a good suggestion, @hai-cea could you take a look at this thread when you have time and give us some input? Would be greatly appreciated, thanks.

[afilp]

What is the ComponentThemes method? It is not in the material-ui source code.

[oliviertassinari]

The theme is again changing with the upcoming v0.15.0 release. We have learned from the past and tried to make is simpler. Have a look at #3340.