如何将Material-ui的组件设置为亮/暗原色？我使用的是像这里这样的自定义主题

Question

here is link of docs of how to customize theme

上面的链接包含我们可以配置主题对象的对象。但是默认是原色-主色，如果我想访问原色-深色怎么办。如何访问初级暗？

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);