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

【问题标题】：How do I conditionally render part of my CSS class如何有条件地渲染我的 CSS 类的一部分
【发布时间】：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}} > 它工作得很好。太感谢了！ :)

标签： css reactjs material-ui pseudo-class conditional-rendering

【解决方案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>
}

【讨论】：