Accessing previous theme variables in createMuiTheme

Question

Running Material UI 1.0.0-beta.24

I'm setting a new theme using createMuiTheme:

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

const theme = createMuiTheme({
  typography: {
    fontSize: 16
  }
});

export default theme;

How can I access the theme I'm overriding directly here ? I'd like to do this, which is not working :

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

const theme = createMuiTheme({
  typography: {
    fontSize: theme.typography.fontSize + 2
  }
});

export default theme;

Answer 1

You'd need to create an instance of the default theme and use it when defining your own:

import { createMuiTheme } from 'material-ui/styles';  const defaultTheme = createMuiTheme();  const theme = createMuiTheme({   typography: {     fontSize: defaultTheme.typography.fontSize + 2   } });  export default theme; 

Answer 2

You can also create your theme and then add on to it after theme is created.

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

const theme = createMuiTheme();
theme.typography = {
  ...theme.typography,
  fontSize: theme.typography.fontSize + 2
}

export default theme;