Material-UI 主题浅色/深色是如何工作的？答案

【问题标题】：How does Material-UI theme light / dark work?Material-UI 主题浅色/深色是如何工作的？
【发布时间】：2020-04-23 05:08:07
【问题描述】：

我不知道主题中的明暗是如何工作的。我可以观察主要的工作方式。当我更改主颜色时，组件会更改，但更改 type 中的亮/暗值没有任何作用。

const theme = createMuiTheme({
  palette: {
  type: 'dark',
  primary: {
      light: '#ddd',
      main: '#f00',
      dark: '#666',
      contrastText: '#ddd'
    }
  }
});

<ThemeProvider theme={theme}>
  <CssBaseline>
    <Typography variant='h1' component='h1' color='primary'>
      Hello
    </Typography>
  </CssBaseline>
</ThemeProvider>;

【问题讨论】：

我发现使用您提供的代码有很大的不同。深色：codesandbox.io/s/dark-theme-tgyzq，浅色：codesandbox.io/s/light-theme-9p1vc

标签： reactjs material-ui

【解决方案1】：

<Box bgcolor='primary.light' color='primary.contrastText'>
 Lorem ipsum dolor sit amet.
</Box>

【讨论】：