在MUI v5中将自定义调色板颜色与芯片组件一起使用时出现Typescript错误
在MUI v5中将自定义调色板颜色与芯片组件一起使用时出现Typescript错误
提问于 2021-10-27 15:12:52
我有一个自定义主题，我已经添加自定义颜色到调色板。我希望这个颜色道具能与定制的颜色搭配使用。我测试了Button组件，它工作得很好。但是，当我尝试对芯片组件执行相同的操作时，我收到了一个TypeScript错误：
TypeError: Cannot read properties of undefined (reading 'type')这就是我的主题：
const theme = createTheme({
palette: {
slate: {
darker: "#11161A",
dark: "#1F2932",
main: "#2E3D49",
light: "#6D7780",
lighter: "#B4B9BD",
lightest: "#F7F7F8",
}
}
});
export default theme;
declare module "@mui/material/styles" {
interface PaletteColor {
lightest?: string;
lighter?: string;
darker?: string;
}
interface PaletteOptions {
slate: any;
}
}
declare module "@mui/material/Button" {
interface ButtonPropsColorOverrides {
slate: true;
}
}
declare module "@mui/material/Chip" {
interface ChipPropsColorOverrides {
slate: true;
}
}还有想法呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-27 15:22:37
您的自定义颜色中缺少contrastText。在source中，当Chip颜色不是default时，它使用theme.palette[chipColorProp].main作为背景色，使用theme.palette[chipColorProp].contrastText作为前景色：
const theme = createTheme({
palette: {
slate: {
darker: '#11161A',
dark: '#1F2932',
main: '#2E3D49',
light: '#6D7780',
lighter: '#B4B9BD',
lightest: '#F7F7F8',
contrastText: '#ffffff', // <------------------ Add this line to fix
},
},
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69741212
复制相关文章
相似问题
腾讯云开发者
