I am currently working on passing down an muiTheme to a component through the use of ThemeProvider, and I also want to apply it to the children components. Furthermore, I aim to utilize the theme's properties in both components by creating a classes object using makeStyles.
The specific components/files involved are as follows:
- Component
LeftSection| rendersSubsection muiTheme
LefSectionTheme| used for classes objects inLeftSectionComponent
RightSection| rendersSubsectionmuiTheme
RightSectionThemeComponent
Subsection
My goal is to include a classes object created with makeStyles() in each component, leveraging the theme's properties. I haven't included any code snippets here as I've been experimenting with various functions and configurations, but I suspect there may be gaps in my understanding of how some of these functions operate.
To visualize this scenario without classes, you can view this reproduction: LeftSection and RightSection rendering Subsection with their themes - my objective is to incorporate classes into this setup.
Below is the code snippet for the Subsection component where I intend to utilize 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;
Any guidance on how to achieve this would be greatly appreciated.