如何在Material UI makeStyles中根据data是否非空条件渲染hover样式

你之前的写法错误原因是：makeStyles的样式配置需要传入JavaScript对象，而非CSS字符串，你把hover规则包裹在模板字符串里返回，相当于返回了一段纯文本，自然无法被MUI的样式系统解析生效。
下面提供两种可直接使用的实现方案：

方法1：样式规则函数返回条件对象 #

makeStyles的每个样式属性支持接收函数，参数为你传入useStyles的props，通过展开运算符条件插入hover样式即可：

const useStyles = makeStyles(theme => ({
  card: props => ({
    height: '100%',
    position: 'relative',
    // 只有data存在时才插入hover样式规则
    ...(props.data && {
      '&:hover': {
        background: theme.palette.secondary.light,
        cursor: 'pointer',
        '& $hide': {
          opacity: 1,
          transition: '0.6s',
        },
      },
    }),
  }),
  // 如果你用到hide类名需要在这里提前声明
  hide: {
    opacity: 0
  }
}));

// 组件代码保持原有逻辑即可
const MyComponent = ({data}) => {
  const classes = useStyles({data});
  return <div className={classes.card}>
    Hello
  </div>
}

方法2：动态拼接类名（更推荐） #

拆分普通卡片和可hover卡片的样式，用MUI内置的clsx工具动态拼接类名，样式逻辑更清晰，后续维护成本更低：

import clsx from 'clsx'; // MUI默认内置，无需额外安装
const useStyles = makeStyles(theme => ({
  card: {
    height: '100%',
    position: 'relative',
  },
  // 单独抽离hover相关规则
  cardHoverable: {
    '&:hover': {
      background: theme.palette.secondary.light,
      cursor: 'pointer',
      '& $hide': {
        opacity: 1,
        transition: '0.6s',
      },
    },
  },
  hide: {
    opacity: 0
  }
}));

const MyComponent = ({data}) => {
  const classes = useStyles();
  // data存在时才加上可hover的类名
  return <div className={clsx(classes.card, data && classes.cardHoverable)}>
    Hello
  </div>
}

内容的提问来源于stack exchange，提问作者Katie7