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

Posted 2023-02-22

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

【英文标题】：How do i set primary light/dark color to components of Material-ui ? i am using custom theme like here

【发布时间】：2018-08-02 03:52:44

【问题描述】：

here is link of docs of how to customize theme

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

【参考方案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);

【讨论】：

我认为您需要将theme.palatte 更改为theme.palette

谢谢，我已经解决了！