我正在寻找类似ThemeConsumer的东西(可能不存在)。我已经使用了React组件,并且正在使用withStyles()
高阶组件来注入自定义样式。文档中对此进行了很好的描述,但是我没有找到任何使用主题的示例。
我有一些包含ThemeProvider的基本组件。这意味着任何MUI组件都受到它的影响。
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = getTheme(prefersDarkMode);
return (
<ThemeProvider theme={theme}>
...
</ThemeProvider>
)
我还使用一些功能组件makeStyles()
来创建具有所提供主题的样式。
const useStyles = makeStyles(theme => ({
// here I can use theme provided by ThemeProvider
});
但是不能在类组件中使用。所以我正在使用withStyles()
HOC。
const styles = {
// I would like to use here provided theme too
}
export default withStyles(styles)(SomeComponent);
我的问题摘要:
如何在类组件中使用提供的主题?
withStyles
支持类似的语法makeStyles
:
const styles = theme => ({
// here I can use theme provided by ThemeProvider
});
export default withStyles(styles)(SomeComponent);
这是一个简单的工作示例:
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
const StyledPaper = withStyles(theme => ({
root: {
backgroundColor: theme.palette.secondary.main
}
}))(Paper);
export default function App() {
return (
<StyledPaper className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</StyledPaper>
);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句