Пользовательский интерфейс материала: использовать тему в React Class Component

Question

Я ищу что-то вроде 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() HO C.

const styles = {
   // I would like to use here provided theme too
}
export default withStyles(styles)(SomeComponent);

---

Резюме моего вопроса:
Как использовать предоставленную тему в компоненте класса?

Answer 1

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>
  );
}

Answer 2

Компонент, украшенный withStyles(styles), получает специальную classes инъекцию, которая может использоваться для ваших пользовательских стилей. Например:

import { Box } from "@material-ui/core"
import { withStyles } from "@material-ui/core/styles"

const styles = theme => ({
  myCustomClass: {
    color: theme.palette.tertiary.dark
  }
})

class myComponent extends Component {
  render() {
    const { classes, theme } = this.props
    // In last line, you see we have passed `{ withTheme: true }` option
    // to have access to the theme variable inside the class body. See it
    // in action in next line.

    return <Box className={classes.myCustomClass} padding={theme.spacing(4)} />
  }
}

export default withStyles(styles, { withTheme: true })(myComponent)

Если вы передадите параметр { withTheme: true } в withStyles HO C, вы получите переменную темы, также введенную в качестве реквизита.

Если к вашему компоненту применяются другие HOC (например, Redux's connect, Router и т. Д. c), вы можете использовать его следующим образом:

export default withStyles(styles, { withTheme: true })(
   withRouter(connect(mapStateToProps)(myComponent))
)

Более подробное объяснение этого topi c можно найти в этой статье: Использование переменной темы пользовательского интерфейса материала в компоненте React Function и Class * .