MakeStyles (Material UI) apply style to child element - reactjs

Question

I was wondering if it's possible to apply a style to a child element only, using MakesStyles, for example in a normal HTML/CSS project:
<div className="parent">
<h1>Title!</h1>
</div>
.parent h1 {
color: #f00;
}
This would color every title inside the div.
I have tried a few differnt ways, one of them was this:
// Function
const { parent } = homeStyle()
return (
<div className={parent}>
<h1>Title!</h1>
</div>
)
// Style
const homeStyle = makeStyles(theme => ({
parent: {
background: "#fff",
h1: {
color: "#f00",
}
},
}))
But it didn't work.

Answer 1

If you are looking to just style material-ui H1 titles, you can select it with:
.parent .MuiTypography-h1 {
color: #f00;
}
In the photo below for an alternative solution, you'll see the classes that are applied to elements with material-ui. The inspector can be handy in identifying the names of the material-ui elements you want to select.
Your mileage may vary, depending on your CSS setup.
What I read from your question however, is a desire to select a single H1, within perhaps a <div> amonst other styled H1s. This can be done with ThemeProvider in the material-ui library (docs here):
import { Typography } from "#material-ui/core";
import {
createMuiTheme,
responsiveFontSizes,
ThemeProvider
} from "#material-ui/core/styles";
const Themed = ({ children }) => {
const theme = createMuiTheme({
overrides: { {/* <-- create a style override */}
MuiTypography: {
h1: {
"&.styled": { {/* <-- specify a className for overrides */}
color: "red"
}
}
}
}
});
return (
<ThemeProvider theme={responsiveFontSizes(theme)}>
<>{children}</>
</ThemeProvider>
);
};
const App = () => {
return (
<Themed>
<Typography
className="styled" {/* <-- add the style from above */}
variant="h1">
Styled H1
</Typography>
<Typography
variant="h1">
Not styled H1
</Typography>
<Typography
variant="h1">
Me neither
</Typography>
</Themed>
);
};
export default App;
Working CodeSandbox.