Nesting CSS selectors in material-ui?

I can't figure out how to do the simplest thing in CSS using makeStyles from material-ui.

Imagine this super simple example:

<div classNames={clsx(wrapper, post.new && classes.new)}>
  <p classNames={text}>Post</p>
  <p> Something else </p>
</div>

The styles are really easy as well:

const useStyles = makeStyles({
  wrapper: {
    // styles
  },
  text: {
    // styles
  },
  new: { 
    text: { 
      color: 'red', // this does not work, why? :[
    } 
  }
});

You can probably guess by now what the problem here is. I want wrapper to have new class sometimes and when it happens text gets red. That's it. I have absolutely no clue how to do this.

I know there's '& .something' but this looks like a bad approach and I don't even know exact class name for text because classes are gibberish ( makeStyles-text-somerandomnumber). I don't want to add .new class to everything that needs extra styles, what if I there are multiple paragraphs that need different styles? Impossible to maintain. I guess I must be missing something, it's so trivial, yet, no idea how to do this!

Any help would be highly appreciated!