reactjs - 如何为 Material-ui 的组件设置主浅色/深色？我正在使用像这里这样的自定义主题

Question

here is link of docs of how to customize theme

上面的链接有Object，我们可以配置主题对象。但默认它采用primary-main color，如果我想访问primary-dark怎么办？如何进入原色黑暗？

Answer 1

您可以将深色主题设置为默认值，如下所示:

// ... imports ... 
const theme = createMuiTheme({
  palette: {
    type: 'dark',
  }
});

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root')
);

对于每个主题，您都有原色和次要颜色。对于初级例如primary.light、primary.main 和 primary.dark。

在您的组件中，您可以像这样访问主题变量:

// ... imports ... 
const styles = theme => ({
  darkColor: {
    color: theme.palette.primary.dark // or theme.palette.primary.main
  } 
})

const StatelessMyComponent = ({ classes }) => 
  <div className={classes.darkColor}>Look at my dark color! :)</div>;

export withStyles(styles)(StatelessMyComponent);