我已將 MUI 從 v4 升級到 v5。但是，我現在很難理解主題如何與可用的不同主題解決方案配合使用。我真的不明白在哪里使用 MUI 主題/樣式組件以及何時使用情感組件。
在新組件中，我使用sxprop 來應用樣式，但是我有相當多的組件仍在使用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>
是否有在不同檔案中的多個組件中使用帶有打字稿的新樣式解決方案的專案示例？
uj5u.com熱心網友回復：
從
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326550.html
標籤：javascript 反应 打字稿 材质-ui