web-dev-qa-db-ja.com

Makestylesを使って別の選択されたクラスにネストされたクラス

ルートが選択されているときに「要素」をターゲットにする方法を知っておく必要があります。

これはMakestylesです。

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

これはJSXです

<div className={`${classes.root} ${elementSelected ? 'selected : ''}`}>
  <div className={classes.element}>
  </div>
</div>
 _
cssreactjsmaterial-designmaterial-uijss
3
Aladdin Mhemed

これを実現するには, https：//www.npmjs.com/package/classnames を使用できます。

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

そしてあなたのJSX

import classNames from 'classnames';

...

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

この答えは@Chrisの答えの代替案としてです。

あなたが使用できるように、あなたのプロジェクトに別のパッケージを含める必要はありません 'clsx' material-uiから。現状は次のとおりです。

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

インストールすると、CLSXパッケージには素材-UIが付属しています。

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

...

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