reactjs - 使用 makeStyles 时如何使用变量值作为类名？

Question

在我的 React 应用程序中，我有一个接收一些数据的组件。根据该数据的值，我想显示具有不同颜色背景的组件。

样式定义为：

const useStyles = makeStyles((theme) => ({
  class1: {
    backgroundColor: "red",
  },
  class2: {
    backgroundColor: "pink",
  },
}));

组件是：

const MyBox = ({ data }) => {
  let classes = useStyles();

  let innerClassName;

  if (data.value) {
    innerClassName = "class1";
  } else {
    innerClassName = "class2";
  }

  return (
    <div className={innerClassName}>
Content goes here
    </div>
  );
};

export default MyBox;

但是，这会为组件提供一个“class1”或“class2”类，makeStyles 不会获取该类。我也尝试过<div className={classes.innerClassName}>，但它会寻找一个名为“innerClassName”的类，显然它找不到。

我想我需要在其中使用某种变量字符串，<div className={????}>但我尝试了各种模板文字字符串，但都没有奏效。我应该做什么？