材料UI。在React类组件中使用主题

我正在寻找像ThemeConsumer这样的东西(可能不存在)。我有一个React组件,我使用的是 withStyles() 高阶组件来注入自定义样式。这在 文件 但我没有找到任何使用主题的例子。


我有一些基础组件,其中包含 主题供应商. 这意味着任何一个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>
  );
}

Edit withStyles using theme

给TA打赏
共{{data.count}}人
人已打赏
解决方案

Xcode: 错误:对于函数式的转换或类型构造,预期'('。

2022-4-22 6:00:09

解决方案

标签活动片段到活动

2022-4-22 6:00:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索