[英]Material UI 5.0 Typescript React Custom theme
I have problem with customization of a theme in Material UI 5.0 using typescript.我在使用 typescript 在 Material UI 5.0 中自定义主题时遇到问题。
theme.ts主题.ts
import { createTheme } from '@mui/material';
declare module '@mui/material/styles' {
interface Theme {
custom: {
buttonWidth: string;
};
}
interface ThemeOptions {
custom: {
buttonWidth: string;
};
}
}
export const theme = createTheme({
palette: {
primary: {
main: '#00F',
},
},
typography: {
body1: {
fontFamily: 'Comic Sans',
},
},
custom: {
buttonWidth: '200px',
},
});
export const CustomTheme= typeof theme;
But when I try to use it, it doesn't work但是当我尝试使用它时,它不起作用
// CustomTheme imported
<Button sx={{ width: (theme: CustomTheme) => theme.custom.buttonWidth}} />
It's showed as any or I have this typescript error:它显示为 any 或者我有这个打字稿错误:
Did you mean 'typeof CustomTheme'?您的意思是“自定义主题类型”吗?
My question is what is the right way to implement a custom theme with Material UI 5.0 and typescript我的问题是使用 Material UI 5.0 和 typescript 实现自定义主题的正确方法是什么
package.json包.json
// other dependencies
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.0.0",
"@mui/material": "^5.0.0",
In material v5 you can override the default style by using styleOverrides
在材料 v5 中,您可以使用styleOverrides
覆盖默认样式
const theme = createTheme({
palette: {
primary: {
main: '#00F',
},
},
typography: {
body1: {
fontFamily: 'Comic Sans',
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
width: 200,
},
},
},
},
})
and this style will be applied for every single Button
这种样式将应用于每个Button
Reference link: https://mui.com/customization/theme-components/#global-style-overrides参考链接: https : //mui.com/customization/theme-components/#global-style-overrides
从@mui/material 检查您的按钮组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.