reactjs 在MUI调色板定制中获取Typescript错误

y3bcpkx1 于 2023-03-29 发布在 React

关注(0)|答案(1)|浏览(103)

我试图添加一个自定义的颜色在MUI v5与Typescript，但它给我
类型“my_custom_color”不能分配给类型“primary”|“继承”|“次要”|“成功”|“错误”|“信息”|“警告”|未定义'。
我已经遵循了MUI文档中提到的所有步骤

import {createTheme} from "@mui/material";

export default createTheme({
    palette: {
        my_custom_color: {
            main: "#e82020"
        }
    }
});

declare module "@mui/material/styles" {
    interface Palette {
        my_custom_color: Palette["primary"];
    }

    interface PaletteOptions {
        my_custom_color: PaletteOptions["primary"];
    }

   
    }
}

但它仍然抛出类型错误

<ThemeProvider theme={theme}>
     <Button variant={"contained"} color={"my_custom_color"}></Button>
   </ThemeProvider>

reactjs

来源：https://stackoverflow.com/questions/75847396/getting-typescript-error-in-mui-palette-customization

1条答案

按热度按时间

nxowjjhe1#

当添加一个自定义颜色到你的主题你提供一个string

export default createTheme({
  palette: {
    my_custom_color: {
      main: "#e82020",
    },
  },
});

当尝试输入主题时，您提供Palette['primary]作为类型。但这是无效的，因为primary是一个对象，请参阅调色板自定义。相反，您可以将my_custom_color作为字符串输入。

declare module "@mui/material/styles" {
  interface Palette {
    my_custom_color: string;
  }

  interface PaletteOptions {
    my_custom_color: string;
  }
}

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs 在MUI调色板定制中获取Typescript错误

1条答案

相关问题

热门标签

最新问答