Answer a question

I am looking for something like ThemeConsumer (which probably doesn't exist). I've React component and I am using withStyles() higher-order component to inject custom styles. It's pretty well described in documentation but I didn't find any example which uses theme.

I have some base component which contains ThemeProvider. It means any of MUI components are being affected by it.

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme = getTheme(prefersDarkMode);
return (
   <ThemeProvider theme={theme}>
      ...
   </ThemeProvider>
)

I also use some functional components with makeStyles() to create styles with provided theme.

const useStyles = makeStyles(theme => ({
   // here I can use theme provided by ThemeProvider
});

But it can't be used in class components. So I am using withStyles() HOC.

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

Summary of my question:
How do I use provided theme in class component?

Answers

withStyles supports similar syntax as makeStyles:

const styles = theme => ({
   // here I can use theme provided by ThemeProvider
});
export default withStyles(styles)(SomeComponent);

Here's a simple working example:

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