How to use custom defined hues in the palette across the system in Material UI v1?

Question

It is no secret that v1 theme configuration guide is not easy to understand. I have following palette defined in my web app. My main primary color is '#6699CC' which is used all over the system:

const theme = createMuiTheme({
  palette: {
    primary: {
      50: '#e3f2fd',
      100: '#bbdefb',
      200: '#90caf9',
      300: '#64b5f6',
      400: '#42a5f5',
      500: '#6699CC',
      600: '#75a3d1',
      700: '#84add6',
      800: '#93b7db',
      900: '#0d47a1',
      A100: '#82b1ff',
      A200: '#448aff',
      A400: '#2979ff',
      A700: '#2962ff',
      contrastDefaultColor: 'light',
    },
    secondary: {
      50: '#fce4ec',
      100: '#f8bbd0',
      200: '#f48fb1',
      300: '#f06292',
      400: '#ec407a',
      500: '#e91e63',
      600: '#d81b60',
      700: '#c2185b',
      800: '#ad1457',
      900: '#880e4f',
      A100: '#ff80ab',
      A200: '#ff4081',
      A400: '#f50057',
      A700: '#c51162',
      contrastDefaultColor: 'light',
    },
    error: {
      50: '#ffebee',
      100: '#ffcdd2',
      200: '#ef9a9a',
      300: '#e57373',
      400: '#ef5350',
      500: '#f44336',
      600: '#e53935',
      700: '#d32f2f',
      800: '#c62828',
      900: '#b71c1c',
      A100: '#ff8a80',
      A200: '#ff5252',
      A400: '#ff1744',
      A700: '#d50000',
      contrastDefaultColor: 'light',
    },
  },
  overrides: {
    MuiListItemIcon: {
      root: {
        color: 'black',
      },
    },
  },
});

1) My first question is how can I use these colors across the system? In previous versions(<=0.19) I was able to access primary color with something like this:muiTheme.palette.primary1Color. This is how I tried to extract color from the palette in v1 beta.17 but it does not work:

const styles = theme => ({
  rootListItemIcon: {
    color: theme.palette.primary,
  },)}

2) How can I extract and use different hues from the palette? For example, how can I use 400: '#42a5f5', hue defined in the primary palette in my inline style of any component? Any help will be appreciated.

connect2Coder connect2Coder · Accepted Answer · 2017-11-01T22:34:30

Here is the answer: To access the different hues from different color palette just use:theme.palette.primary.A200,

To use specific hues that do not start with letter use this syntax:theme.palette.primary[400]

How to use custom defined hues in the palette across the system in Material UI v1?

1 Answers