reactjs 创建版式变体时使用MUI调色板颜色

63lcw9qa  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(139)

我目前正在使用材料UI React 5.11.3。
目前,为了指定我想使用text.secondary颜色,我需要在每次使用标题变量时在颜色属性中指定它:

<Typography variant="caption" color="text.secondary">
  Text
</Typography>

为了避免重复,我想设置一个名为"caption"的Typography变体,它引用MUI调色板颜色text.secondary。但是,目前TypographyOptions中的color属性只支持CSS颜色(例如,color: red可以工作)。

因此,理想情况下,我希望在定义标题变体时引用MUI调色板主题:
x一个一个一个一个x一个一个二个x
有没有办法做到这一点?

nbysray5

nbysray51#

根据MUI document,当一个选项依赖于另一个选项时,可以逐步组合theme,这可以用于定义用例中所需的variant
示例:(快速实验演示:stackblitz

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { pink, teal } from '@mui/material/colors';

let theme = createTheme({
  palette: {
    text: {
      primary: {
        main: pink[500],
      },
      secondary: {
        main: teal[300],
      },
    },
  },
});

theme = createTheme(theme, {
  typography: {
    caption: {
      fontSize: '0.875rem',
      color: theme.palette.text.secondary.main,
    },
    h4: {
      color: theme.palette.text.primary.main,
    },
  },
});

相关问题