在自定义MUI组件变体中使用浅色/深色模式的主题调色板颜色

Question

出于可读性原因，我想拆分在createTheme函数中传递的components对象(组件可能有很大的变体)，并且我确实有亮/暗模式。

根据文档，我们是这样得到设计标记的:

const getDesignTokens = (mode: PaletteMode) => ({
palette: {
mode,
...(mode === 'light'
? {
// palette values for light mode
primary: amber,
divider: amber[200],
text: {
primary: grey[900],
secondary: grey[800],
},
}
: {
// palette values for dark mode
primary: deepOrange,
divider: deepOrange[700],
background: {
default: deepOrange[900],
paper: deepOrange[900],
},
text: {
primary: '#fff',
secondary: grey[500],
},
}),
},
});

之后，我根据模式是亮还是暗来创建主题。

问题是当我试图添加一个组件到主题(如前所述，每个组件将只在createTheme中引用，定义将在其他地方)，我不能使用主题的颜色，而不包装组件是一个函数，它具有使用的模式参数。

我想知道如果有任何解决方案和sx道具当你引用的颜色作为一个字符串,假设sx={{ backgroundColor: 'button.background' }},将自动使用主题。

将每个组件包装在一个带参数的函数中可以完成这项工作，但我想知道是否有更好的解决方案。

代码现在是怎样的:

const dashedVariants = (palette) => ({
props: {variant: 'dashed'},
style: {
border: `1px dashed ${palette.dashColor}`
}
})
const Button = (palette) => ({
styleOverrides: {},
variants: [dashedVariants(palette)]
})

vs . what I'm trying to achieve:

const dashedVariants = {
props: {variant: 'dashed'},
style: {
border: `1px dashed palette.dashColor` //something like that??
}
}

注意这个问题我已经看过了，但不幸的是，这个似乎没有帮助。

Answer 1

1. 由于CSS属性的复杂性，许多UI工具包及其主题仅解析单个属性(或提供绕道实用程序);MUI就是其中之一。使用单独的边界属性解析器工作。调色板颜色属性解析器仅适用于React.CSSProperties['color']属性类型。.border属性为Property.Border类型。在这种情况下，颜色解析器将不起作用。

2. Palettetype仅适用于适当的属性。它不提供dashColor属性。根据MUI文档，工作属性为:

.palette.primary.light
.palette.primary.main
.palette.primary.dark
.palette.primary.contrastText
// ...
.palette.secondary
.palette.error
.palette.warning
.palette.info
.palette.success

const theme = {
palette: {
secondary: {
main: '#...' // user defiend color
}
}
}
const dashedVariants = {
props: {variant: 'dashed'},
style: {
borderColor: 'secondary.main',
borderWidth: '1px',
borderStyle: 'dashed',
}
}

3. 有一个实验性的CSS变量特性。这样，就可以在复杂属性中定义CSS变量。这可能是最接近目标的，但它目前处于实验阶段，可能不稳定的生产使用。我也期待着在未来使用它。