Material-UI | Using `theme` in makeStyles

Question

I'm trying to take an muiTheme, pass it down to a component via ThemeProvider and to its children, and then use the theme's properties in both of them in a classes object that's created by makeStyles.

Specifically, these are the components/files I have:

• component LeftSection | renders Subsection (described below)

• muiTheme LefSectionTheme | is used in classes objects in LeftSection

• component RightSection | renders Subsection

• muiTheme RightSectionTheme

• component Subsection

What I want to do is do add a classes object created by makeStyles() in each of the components, and each of them use the theme's properties. I'm not posting code here because I tried a lot of combinations of the functions and I suppose that I just have a hole in my understanding of how some of those functions work.

So here's a reproduction without any classes: LeftSection and RightSection rendering Subsection with their themes - to this I want to add classes.

Here is the code of the Subsection component where I want to use classes:

import React from "react";
import { useTheme } from "@material-ui/styles";

function Subsection(props) {
  const theme = useTheme();
  return (
    <p
      style={{
        color: theme.palette.primary.main
      }}
    >
      test
    </p>
  );
}

export default Subsection;

How can I do that?

Answer 1

Below is the syntax for using classes which use the theme for this styling:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  paragraph: {
    color: theme.palette.primary.main
  }
}));
function Subsection(props) {
  const classes = useStyles();
  return <p className={classes.paragraph}>test</p>;
}

export default Subsection;

Without seeing the code of what you have tried before, it is hard for me to know what specific holes you may have in your understanding, so if you have specific questions about this I can add some more explanation/references.