CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
MarkinMark
MarkinMark

Reputation: 99

MakeStyles (Material UI) apply style to child element

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.

Upvotes: 4

Views: 3216

Answers (1)

Harley Lang
Harley Lang

Reputation: 2333

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;

enter image description here

Working CodeSandbox.

Upvotes: 2

Related Questions