如何使用嵌套的类名？ [复制]答案

【问题标题】：How to use nested classNames? [duplicate]如何使用嵌套的类名？ [复制]
【发布时间】：2020-10-30 15:51:26
【问题描述】：

我正在使用 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,
};

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我认为你需要这样的东西

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>
  );
};

【讨论】：

【解决方案2】：

你可以这样做

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

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

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

或者类似的东西：

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

【讨论】：