如何有条件地渲染我的 CSS 类的一部分

Posted 2023-02-22

【中文标题】如何有条件地渲染我的 CSS 类的一部分

【英文标题】：How do I conditionally render part of my CSS class

【发布时间】：2021-12-28 13:43:01

【问题描述】：

当变量（数据）不为空时，如何使以下悬停伪类中的所有 css 有条件地呈现？我的 React 组件中有以下样式（使用 Material UI makeStyles：

const useStyles = makeStyles(theme => (
      card: 
        height: '100%',
        '&:hover': 
          background: theme.palette.secondary.light,
          cursor: 'pointer',
          '& $hide': 
            opacity: 1,
            transition: '0.6s',
          ,
        ,
      ,
));

const myComponent = (data) => 
     const classes=useStyles(data);
     <div className=classes.card>
          Hello
     </div>

我已经尝试使用以下几行的内容，但是所有的反引号和撇号根本不起作用！：

  card: 
    height: '100%',
    position: 'relative',
    ( data) => (data && `'&:hover': 
      background: $theme.palette.secondary.light,
      cursor: 'pointer', 
      '& $hide': 
        opacity: 1,
        transition: '0.6s',
      ,
    ,`),
  ,

非常感谢，

凯蒂

【问题讨论】：

虽然我并不完全熟悉这种语法，但在我看来，最简单的解决方案是有条件地附加该类。可能是className=data ? classes.card : null 之类的？

谢谢 Pixell！这是一个可爱、简单的解决方案。我将这个类分成两个类（一个悬停信息，另一个悬停信息），然后按如下方式应用该类： $classes.card $dataType && classes.cardWithLink > 它工作得很好。太感谢了！ :)

【参考方案1】：

尝试使用classnames 包

import cx from 'classnames';

const useStyles = makeStyles(theme => (
      cardWithData: 
        height: '100%',
        '&:hover': 
          background: theme.palette.secondary.light,
          cursor: 'pointer',
          '& $hide': 
            opacity: 1,
            transition: '0.6s',
          ,
        ,
      ,
     card: 
       height: '100%',
     
));

const myComponent = (data) => 
     const classes=useStyles();
     <div className=cx([classes.cardWithData]: Boolean(data), [classes.card]:!data)>
          Hello
     </div>