Sometimes, we want to apply styles for CSS pseudo selectors with Material UI.

In this article, we’ll look at how to apply styles for CSS pseudo selectors with Material UI.

How to apply styles for CSS pseudo selectors with Material UI?

To apply styles for CSS pseudo selectors with Material UI, we can add style properties for pseudoselectors.

For instance, we write:

import { makeStyles } from "@material-ui/core";
import React from "react";

const useStyles = makeStyles(() => ({
  paragraphWithWarningDiv: {
    margin: "32px 0px 24px",
    "& :nth-child(1)": {
      marginBottom: "100px"
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.paragraphWithWarningDiv}>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
    </div>
  );
}

We call makesStyles with an object to apply extra bottom margin to the first child element of the parent with class paragraphWithWarningDiv.

We set the marginBottom of the first child element by setting the "& :nth-child(1)" property to an object with marginBottom set to '100px'.

As a result, we see that the first p element has a 100px bottom margin.

Conclusion

To apply styles for CSS pseudo selectors with Material UI, we can add style properties for pseudoselectors.