Nested class in another selected class with makeStyles

Question

I need to know how to target 'element' when root is selected

This is makeStyles:

const useStyles = makeStyles(theme => ({
   root:{
      '&.selected': {
      }
   },
   element: {
   }
})

This is jsx

<div className={`${classes.root} ${elementSelected ? 'selected : ''}`}>
  <div className={classes.element}>
  </div>
</div>

Photomultiplier

Answer 1

You can use https://www.npmjs.com/package/classnames to achieve this.

const useStyles = makeStyles(theme => ({
   root:{
      '&.selected $element': {
      }
   }
})

And your JSX

import classNames from 'classnames';

...

<div className={classNames(classes.root, elementSelected ? 'selected : '')}>
  <div className={classes.element}>
  </div>
</div>

Retraction

and then how will the makeStyles be? – Photomultiplier

your Jss is fine. No change is required – Retraction

No, my makeStyles does not target .element when root is selected. Actually this is what I am missing. – Photomultiplier

Sorry, just ignored my last comment. I have included the jss change as well now – Retraction

Hi @ChrisChen. I'm trying to do a similar thing, but couldn't able to achieve this and not able to figure out why. codesandbox.io/s/mystifying-swanson-yys5n , this is the demo. In this, I'm trying to change the icon color on hovering over the parent. can you please help – Cheek

parent is listItemStyle class – Cheek

Answer 2

This answer is as an alternative to @Chris' answer.

You don't need to include another package to your project, as you can use 'clsx' from Material-UI. Here's how:

const useStyles = makeStyles(theme => ({
    root:{
        '&.selected $element': {
        }
    }
})

The clsx package comes with Material-UI when you install it.

import clsx from 'clsx';
const classes = useStyles(props);

...

<div className={clsx(classes.root, {
        [classes.selected]: elementSelected
    })}
>
    <div className={classes.element}>
    </div>
</div>

Dampen

Just because a dependency is installed when you install something else, doesn't mean that you shouldn't also add it to your project directly. Your bundle generator (like Webpack) should only include one copy of the dependency, and your package manager should only download one copy, too. – Suprarenal