如何使用嵌套的类名？[副本]

Question

我正在使用React和Material ui并创建一个进度条。

我创建了以下类：

const useStyles = makeStyles({
  progressSegment: {
    display: "flex",
  },
  item: {
    width: "100%",
    backgroundColor: "lightgray",
    marginRight: 2,
    height: 8,

    "&:first-child": {
      borderTopLeftRadius: 3,
      borderBottomLeftRadius: 3,
    },

    "&:last-child": {
      borderTopRightRadius: 3,
      borderBottomRightRadius: 3,
    },

    "&.red-common": {
      background: "#D1132A",
    },

    "&.gold-common": {
      background: "#EBA75C",
    },

    "&.orange-common": {
      background: "#E4590F",
    },

    "&.yellow-common": {
      background: "#FFCD0F",
    },

    "&.yellow-light-common": {
      background: "#EACB16",
    },

    "&.green-light-common": {
      background: "#C1C625",
    },

    "&.green-common": {
      background: "#2CAC87",
    },
  },
});

然后在我的组件中，我创建了一些div来呈现进度条。这就是我想要实现的目标：

这是我的组件：

export const SegmentedProgressBar = () => {
  const classes = useStyles();
  return (
    <div className={classes.progressSegment}>
      <div className={classes.item} />
      <div className={classes.item} />
      <div className={classes.item} />
      <div className={classes.item} />
      <div className={classes.item} />
      <div className={classes.item} />
      <div className={classes.item} />
    </div>
  );
};

问题是如何将这些类传递给我的第一个嵌套div:className=“item red common”，然后依次传递给下一个嵌套的div？

我想我可以使用clsx库，但是我不确定如何使用。

提前谢谢！

编辑：对于寻找此解决方案的任何人，以下是我如何使用条件实现此解决方案：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import PropTypes from "prop-types";

const useStyles = makeStyles({
  progressSegment: {
    display: "flex",
  },
  item: {
    width: "100%",
    backgroundColor: "lightgray",
    marginRight: 2,
    height: 8,

    "&:first-child": {
      borderTopLeftRadius: 3,
      borderBottomLeftRadius: 3,
    },

    "&:last-child": {
      borderTopRightRadius: 3,
      borderBottomRightRadius: 3,
    },

    "&.red-common": {
      background: "#D1132A",
    },

    "&.gold-common": {
      background: "#EBA75C",
    },

    "&.yellow-common": {
      background: "#FFCD0F",
    },

    "&.yellow-light-common": {
      background: "#EACB16",
    },

    "&.green-common": {
      background: "#2CAC87",
    },
  },
});

export const SegmentedProgressBar = ({ level = 0 }) => {
  const classes = useStyles();

  return (
    <div className={classes.progressSegment}>
      <div className={`${classes.item} ${level >= 1 && "red-common"}`} />
      <div className={`${classes.item} ${level >= 2 && "gold-common"}`} />
      <div className={`${classes.item} ${level >= 3 && "yellow-common"}`} />
      <div
        className={`${classes.item} ${level >= 4 && "yellow-light-common"}`}
      />
      <div className={`${classes.item} ${level >= 5 && "green-common"}`} />
    </div>
  );
};

SegmentedProgressBar.propTypes = {
  level: PropTypes.number,
};

Answer 1

你可以这样做

<div className={`${classes.item} ${classes.other-class}`}>

或者像你说的那样使用clsx。

https://nikitahl.com/how-to-assign-multiple-classes-in-react/

或者类似的事情：

<div className={[class1, class2, class3].join(' ')} />

Answer 2

我想你需要这样的东西

export const SegmentedProgressBar = () => {
  const classes = useStyles();
  return (
    <div className={classes.progressSegment}>
      <div className={`${classes.item} red-common`} />
      <div className={`${classes.item} gold-common`} />
      <div className={`${classes.item} orange-common`} />
      <div className={`${classes.item} yellow-common`} />
      <div className={`${classes.item} yellow-light-common`} />
      <div className={`${classes.item} green-light-common`} />
      <div className={`${classes.item} green-common`} />
    </div>
  );
};