MakeStyles (Material UI) apply style to child element

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.