我正在尝试Theme使用 Material UI 进行扩展，但它抛出一个错误，说我没有正确扩展它，说，Property 'layout' is missing in type 'Palette' but required in type 'IPaletteOptions'.这是我所拥有的：// src/theme/theme.d.tsimport { Theme } from "@material-ui/core/styles";import { IPaletteOptions, PaletteOptions} from "@material-ui/core/styles/createPalette";type TLayout = { primary: string; secondary: string;};declare module "@material-ui/core/styles/createPalette" { export interface IPaletteOptions extends PaletteOptions { layout: TLayout; }}declare module "@material-ui/core/styles" { export interface ITheme extends Theme { palette: IPaletteOptions; }}// src/theme/index.tsimport { createMuiTheme, ITheme } from "@material-ui/core/styles";import { IPaletteOptions } from "@material-ui/core/styles/createPalette";export const palette = { layout: { primary: "#ffffff", secondary: "#e4e4e4" }} as IPaletteOptions;export default createMuiTheme({ palette }) as ITheme;// src/App.tsximport React from "react";import { ThemeProvider, ITheme } from "@material-ui/core";import theme from "./theme";import Component from "./Component";export default function App() { return ( <ThemeProvider<ITheme> theme={theme}> <Component /> </ThemeProvider> );}import { useTheme } from "@material-ui/core";import React from "react";export default React.memo(() => { const theme = useTheme(); // <-- this should be of type `ITheme` automatically // If I do useTheme<ITheme>(), it shows property 'layout', but // I shouldn't have to do that, because of the type casting that // I do in App.tsx, where I import and use 'theme' from src/theme/index.ts return <div>the layout primary color is {theme.palette.layout.primary}</div>;});我在这里做错了什么？我想在我的整个应用程序中使用，除了我添加的内容之外，ITheme这还将扩展基本功能。Theme
3 回答
慕姐8265434
TA贡献1813条经验 获得超2个赞
在 Material v5 中你可以扩展CommonColors
declare module "@mui/material/styles/createPalette" {
interface CommonColors {
layout: {
offBlack: string;
offWhite: string;
}
}
}
const colors = createTheme({
palette: {
common: {
layout: {
offBlack: "#14142B",
offWhite: "#FCFCFC",
},
},
},
});
// In a component
const useStyles = makeStyles((theme) => ({
target: {
backgroundColor: theme.palette.common.layout.offBlack
}
}));
慕妹3146593
TA贡献1820条经验 获得超9个赞
我认为覆盖使用您的ITheme类似内容的东西会更方便，如下所示：
theme.d.ts
declare module "@material-ui/core/styles" {
export interface ITheme extends Theme {
palette: IPaletteOptions;
}
// Keep overriding these things in your app
// In this case returns `ITheme`
export function createMuiTheme(options?: ThemeOptions, ...args: object[]): ITheme;
// returns `ITheme`
export function useTheme<T = ITheme>(): T;
}
然后你不再需要在你的theme/index.ts：
export default createMuiTheme({ palette });
如果使用useTheme，它应该ITheme按预期返回。
注意：我还更新了codesandbox：https://codesandbox.io/s/charming-pasteur-s6h8v ?file=/src/Component.tsx
眼眸繁星
TA贡献1873条经验 获得超9个赞
我通过使用这个来实现这个工作：
declare module '@material-ui/styles' {
export interface DefaultTheme extends CustomTheme {}
}
请注意，模块中不包含“核心”。
我的完整代码：
import theme from './theme';
type CustomTheme = {
palette: typeof theme;
};
declare module '@material-ui/styles' {
export interface DefaultTheme extends CustomTheme {}
}
添加回答
举报
0/150
提交
取消