How to use pseudo selectors in material-ui?

Question

I have been trying to achieve the simple thing. I was trying to show/hide my component in the material UI v1 with pseudo selectors but somehow it

Answer 1

Just adding with Jorge Santos Neil, you don't necessarily need to use props. I am adding one of the example that is tested for a different scenario. A note is that, this needs to be included in "makeStyles" and then used as a "className". Simply putting it inside "styles={{}}" does not work.

Example:

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