I'm trying to take an muiTheme, pass it down to a ponent 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 ponents/files I have:

• ponent LeftSection | renders Subsection (described below)

• muiTheme LefSectionTheme | is used in classes objects in LeftSection

• ponent RightSection | renders Subsection

• muiTheme RightSectionTheme

• ponent Subsection

What I want to do is do add a classes object created by makeStyles() in each of the ponents, and each of them use the theme's properties. I'm not posting code here because I tried a lot of binations 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 ponent 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?

I'm trying to take an muiTheme, pass it down to a ponent 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 ponents/files I have:

• ponent LeftSection | renders Subsection (described below)

• muiTheme LefSectionTheme | is used in classes objects in LeftSection

• ponent RightSection | renders Subsection

• muiTheme RightSectionTheme

• ponent Subsection

What I want to do is do add a classes object created by makeStyles() in each of the ponents, and each of them use the theme's properties. I'm not posting code here because I tried a lot of binations 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 ponent 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?

• javascript
• css
• reactjs
• material-ui

1 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.