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>

在Material-UI中如何使用浅色

3 个答案: