Document overrides feature from jss-theme-reactor

[kof]

Hi, I have been recently asked how to do that, we should document this feature.

Here is an example from my codebase:

import {createMuiTheme} from 'material-ui/styles/theme'
import {createPalette} from 'material-ui/styles/palette'
import createTypography from 'material-ui/styles/typography'
import merge from 'lodash/object/merge'

const palette = createPalette()

export const typographyConstants = {
  fontFamily: '"proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif',
  fontSize: 12,
  fontWeightLight: 300,
  fontWeightRegular: 400,
  fontWeightMedium: 500
}

const typography = createTypography(palette, typographyConstants)

const MuiFormLabel = {
  root: {
    marginLeft: inputHorizontalSpacing
  },
  focused: {
    color: palette.text.primary
  }
}

export const create = theme => createMuiTheme(merge({
  typography,
  palette,
  overrides: {
    MuiFormLabel
  }
}, theme))

export default create()

[yossijacob]

Thanks oleg,
Based on your example i think this could be a good basic example for the docs.
The differences from the old method as i understand is

1. Use createMuiTheme instead of getMuiTheme
2. Use of the overrides object

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {createMuiTheme} from 'material-ui/styles/theme'
import Button from 'material-ui/Button';

const muiTheme = createMuiTheme({
  overrides:{
    MuiButton:{
      root:{
        fontSize: 20,
      }
    }
  }  
});

class Main extends React.Component {
  render() {
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy
    // using React's context feature.
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <Button raised>Default</Button>
      </MuiThemeProvider>
    );
  }
}

export default Main;

[kof]

Yes, sounds right.

[oliviertassinari]

@sxn You might want to have a look at the issue. Any progress with the documentation of the theme/style/overrides since we talked about it?

[mbixby]

If anybody wants to customize Material UI beyond the official recommendation this gist contains a couple of hacks that might help.

Unlike using the overrides feature of jss-theme-reactor, you'll have access to the original computed styles and the computed theme to write your overriding styles (see example).

import { merge } from 'lodash'

const muiStylesheetOverrides = {
  MuiFormLabel: (originalStyles, theme) => merge(originalStyles, {
    error: {
      color: theme.palette.text.primary
    },
    focused: {
      color: theme.palette.text.primary
    }
  }),
}

The second hack will configure jss-theme-reactor to exclude hash postfixes from Material UI stylesheet class names.

const someComponentJss = {
  root: {
    // This will override styles of all material-ui's <Text /> components
    // under `.root`
    '& .MuiText-text': {
      color: 'white'
    }
  }
}

You can use one or the other or both.

[oliviertassinari]

cc @nathanmarks That could interest you.