Material-UI主题亮/暗是如何工作的？

Question

我不知道主题中的明/暗是如何工作的。我可以观察到main是如何工作的。当我更改main的颜色时，组件会发生更改，但更改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>;

Answer 1

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