Question

v1主题配置指南不容易理解已经不是什么秘密了。我在我的网络应用程序中定义了以下调色板。我的主要原色是'＃6699CC'，它在整个系统中使用：

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）我的第一个问题是如何在整个系统中使用这些颜色？在以前的版本（＆lt; = 0.19）中，我能够使用以下内容访问原色：muiTheme.palette.primary1Color。这就是我尝试从v1 beta.17中的调色板中提取颜色的方法，但它不起作用：

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

2）如何从调色板中提取和使用不同的色调？例如，如何在任何组件的内联样式中使用主调色板中定义的400: '#42a5f5', hue？任何帮助将不胜感激。

Answer 1

以下是答案：要从不同的调色板访问不同的色调，只需使用：theme.palette.primary.A200,

要使用不以字母开头的特定色调，请使用以下语法：theme.palette.primary[400]

如何在Material UI v1中跨系统的调色板中使用自定义色调？

1 个答案: