[英]Material UI v4 Theme augmentation with TypeScript
I'm trying to create my own palette option in the theme section and I'm honestly lost at how exactly I do the augmentation part with TypeScript.我正在尝试在主题部分创建自己的调色板选项,老实说,我对如何使用 TypeScript 进行增强部分感到迷茫。
I've created a file called "material-ui.d.ts" and so far inside I only have:我创建了一个名为“material-ui.d.ts”的文件,到目前为止,我只有:
import { PaletteOptions } from "@material-ui/core/styles/createPalette";
declare module "@material-ui/core/styles/createPalette" {}
At the Theme level, I'm trying to create a new element called kzprimary, which has its own color properties and I can use it instead of the default primary and secondary colors provided by material ui在主题级别,我正在尝试创建一个名为 kzprimary 的新元素,它具有自己的颜色属性,我可以使用它来代替材料 ui 提供的默认主要和次要 colors
import { createTheme, ThemeProvider, colors } from "@material-ui/core";
const basic = createTheme({});
const alternative = createTheme({
palette: {
primary: {
main: colors.purple[500],
},
secondary: {
main: colors.pink[500],
},
},
});
const kaizenTest = createTheme({
palette: {
primary: {
main: colors.blue[500],
},
kzprimary: {
main: colors.pink[500],
},
},
});
const applyTheme = (label: string) => {
switch (label) {
default:
case "basic":
return basic;
case "alternative":
return alternative;
case "kaizen":
return kaizenTest;
}
};
export default applyTheme;
export { ThemeProvider, applyTheme };
I just don't know what I need to edit inside of material-ui.d.ts to make this work.我只是不知道我需要在 material-ui.d.ts 内部编辑什么来完成这项工作。
Can someone please guide me?有人可以指导我吗? kaizenTest is what I pass to my Themeprovider on the app level and it applies the themes.
kaizenTest 是我在应用程序级别传递给我的 Themeprovider 的内容,它应用了主题。 Also note that I am working with v4 of Material UI as delegated by my company.
另请注意,我正在使用我公司委托的 Material UI v4。 So I hope Augmentation is possible on v4.
所以我希望增强在 v4 上是可能的。
Here is my APP index.tsx file:这是我的 APP index.tsx 文件:
import KaizenRouter from "router";
import { BrowserRouter } from "react-router-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import comms from "components/comms/class";
import CommsContext, { useSelector } from "components/comms";
import { Provider } from "react-redux";
import { store } from "./store";
import { getSettings } from "./selectors";
import { applyTheme, ThemeProvider } from "themes";
import { SnackbarProvider } from "notistack";
const App = () => {
return (
<CommsContext.Provider value={comms}>
<Storage />
</CommsContext.Provider>
);
};
const Storage = () => {
return (
<Provider store={store}>
<Theme />
</Provider>
);
};
const Theme = () => {
const { theme } = useSelector(getSettings);
return (
<ThemeProvider theme={applyTheme("kaizenTest")}>
<SnackbarProvider
maxSnack={3}
preventDuplicate
anchorOrigin={{
vertical: "top",
horizontal: "center",
}}
>
<BrowserRouter>
<CssBaseline />
{/* <StrictMode> */}
<KaizenRouter />
{/* </StrictMode> */}
</BrowserRouter>
</SnackbarProvider>
</ThemeProvider>
);
};
export default App;
I have figured it out.我已经想通了。
You simply have to add the interfaces to your file and then augmentation works.您只需将接口添加到您的文件中,然后扩充即可工作。
import { createTheme, ThemeProvider, colors } from "@material-ui/core";
const basic = createTheme({});
const alternative = createTheme({
palette: {
primary: {
main: colors.purple[500],
},
kzprimary: {
main: colors.orange[500]
},
secondary: {
main: colors.pink[500],
},
},
});
const kaizenTest = createTheme({
palette: {
primary: {
main: "#1A2846",
},
kzprimary: {
main: colors.orange[500],
},
background: {
default: '#DDDDDD'
}
},
});
declare module '@material-ui/core/styles/createPalette' {
interface Palette {
kzprimary?: Palette['primary'],
}
interface PaletteOptions {
kzprimary?: PaletteOptions['primary'],
}
}
const applyTheme = (label: string) => {
switch (label) {
default:
case "basic":
return basic;
case "alternative":
return alternative;
case "kaizen":
return kaizenTest;
}
};
export default applyTheme;
export { ThemeProvider, applyTheme };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.