我已将 MUI 从 v4 升级到 v5。但是,我现在很难理解主题如何与可用的不同主题解决方案一起使用。我不太明白在哪里使用 MUI 主题/样式组件以及何时使用情感组件。
在新组件中,我使用 sx
属性来应用样式,但是我有相当多的组件仍在使用 createStyles
/useStyles
函数。
我目前有以下设置:
import {
ThemeProvider as MuiThemeProvider,
Theme,
StyledEngineProvider,
createTheme,
} from "@mui/material/styles";
import { ThemeProvider } from "@emotion/react";
declare module "@mui/material/styles" {
interface Theme {
mycompany: {
primary: string;
};
}
// allow configuration using `createTheme`
interface ThemeOptions {
mycompany: {
primary: string;
};
}
}
declare module "@mui/styles/defaultTheme" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
const theme = createTheme({
mycompany: {
primary: "#003366",
},
});
const App = () => {
return (
<StyledEngineProvider injectFirst>
<MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<Router>
...
</Router>
</ThemeProvider>
</MuiThemeProvider>
</StyledEngineProvider>
我现在如何使用 theme.mycompany.primary
值?我试过这样:
import { useTheme } from "@emotion/react";
const MyComponent = () => {
const theme = useTheme();
return (
<Box sx={{backgroundColor: theme.mycompany.primary}}>
...
</Box>
是否有在不同文件中跨多个组件使用带有 typescript 的新样式解决方案的项目示例?
最佳答案
来自docs , useTheme
应该从 @mui/material/styles
导入。
如果您使用 sx
属性,您应该像这样将自定义颜色代码放在调色板中:
const theme = createTheme({
palette: {
mycompany: {
primary: "#003366"
}
},
});
并在组件中引用颜色:
<Box sx={{ width: 30, height: 30, bgcolor: "mycompany.primary" }} />
如果您正在使用 styled
,您可以添加一个回调,其中 theme
是第一个参数的属性:
const MyComponent = styled(Box)(({ theme }) => {
return {
backgroundColor: theme.palette.mycompany.primary,
width: 30,
height: 30
};
});
现场演示
关于javascript - MUI v5 主题与情感/mui,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69629346/