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>

Chris Chen · Accepted Answer · 2019-12-18T00:37:14.293

16

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>

edited Dec 18 '19 at 00:37

answered Dec 18 '19 at 00:31

Chris Chen

1,228
9
14

and then how will the makeStyles be? – Aladdin Mhemed Dec 18 '19 at 00:32
your Jss is fine. No change is required – Chris Chen Dec 18 '19 at 00:34
No, my makeStyles does not target .element when root is selected. Actually this is what I am missing. – Aladdin Mhemed Dec 18 '19 at 00:35
Sorry, just ignored my last comment. I have included the jss change as well now – Chris Chen Dec 18 '19 at 00:35
Hi @ChrisChen. I'm trying to do a similar thing, but couldn't able to achieve this and not able to figure out why. https://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 – Rajiv Jan 20 '21 at 13:34
parent is `listItemStyle` class – Rajiv Jan 20 '21 at 13:48

score 5 · Answer 2 · answered Apr 05 '20 at 09:46

5

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>

answered Apr 05 '20 at 09:46

Roy.L.T

153
2
5

1

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. – David Wheatley Mar 01 '21 at 20:56

Nested class in another selected class with makeStyles

2 Answers2