如何在material-ui中使用浅二次色

Question

我有这个主题

 palette: {
primary: {
  main: '#d05ce3',
},
secondary: {
  light: '#0066ff',
  main: '#0044ff',

},

我可以像这样使用辅助颜色找到

<ThemeProvider theme={theme}>
              <Checkbox
                color="secondary" 

但是如何使用二次光呢？在

ThemeProvider

像

color="secondary.light"

不起作用！

Answer 1

您必须为您的复选框声明一个类，并在您的CSS中指出您使用您想要的颜色。示例：

<ThemeProvider theme = {theme}>
          <Checkbox
            color = "secondary"
            className = {classes.checkboxColor}
             />

CSS文件：

checkboxColor: {
    color: theme.palette.secondary.light
  }

Answer 2

试试这个方法：

import { makeStyles } from '@material-ui/core/';
import { Typography } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
      number: {
        color: theme.palette.secondary.main
      }
    }));

作为回报

const classes = useStyles();
return(
    <div>
      <Typography variant="h3" className={classes.number}>
        5
      </Typography>
    </div>
);

Answer 3

尝试使用 Box 组件。

<Box color='text.secondary'>
...
</Box>

Answer 4

可以使用

sx

属性来完成，该属性可以应用于

mui components

例如

    <Checkbox
        color = "secondary"
        sx={{backgroundColor:"secondary.light"}}
    />