[英]Theme is empty in makeStyles for @mui/styles as compared to @material-ui/core
I am trying to upgrade to material-ui from version 4.11 to version 5 but facing issues with themes我正在尝试将 material-ui 从版本 4.11 升级到版本 5,但面临主题问题
import { createTheme } from '@mui/material/styles';
import {
ThemeProvider,
StyledEngineProvider,
} from '@mui/material/styles';
const theme = createTheme({
...custom themes
});
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</StyledEngineProvider>
Inside the app
scenario 1
import { makeStyles } from "@mui/styles";
scenario 2
import { makeStyles } from "@material-ui/core";
const useStyles = makeStyles((theme)=>{
console.log("theme ",theme)
return ({
...my themes
})
}
console shows an empty object for scenario 1 in case of mui/styles while there is theme object available for scenario 2 with material-ui在 mui/styles 的情况下,控制台显示场景 1 的空 object,而主题 object 可用于场景 2 和 material-ui
The issue here is that you're importing your ThemeProvider from @mui/material/styles
.这里的问题是您正在从
@mui/material/styles
导入 ThemeProvider 。 In order for the theme object to be populated correctly in makeStyles, you'll need to import the ThemeProvider exported by the @mui/styles
package.为了在 makeStyles 中正确填充主题 object,您需要导入由
@mui/styles
package 导出的 ThemeProvider。
Now having said that.现在说了这么多。 MUI is deprecating
makeStyles
(and the @mui/styles package all together). MUI 正在弃用
makeStyles
(以及 @mui/styles package)。 You can see here in their v4 to v5 migration documents that they recommend using tss-react as a makeStyles replacement, assuming you're using emotion as your styling engine.您可以在他们的 v4 到 v5 迁移文档中看到这里,他们建议使用 tss-react 作为 makeStyles 的替代品,假设您使用 emotion 作为样式引擎。 https://mui.com/material-ui/guides/migration-v4/#2-use-tss-react
https://mui.com/material-ui/guides/migration-v4/#2-use-tss-react
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.