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

Question

这是如何自定义主题的文档链接

上面的链接具有对象，我们可以配置主题对象。但是默认情况下，它采用的是主主色，如果我想访问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);