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

Posted 2023-02-21

【中文标题】如何使用嵌套的类名？ [复制]

【英文标题】：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,
;

【参考方案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(' ') />