我正在从https://www.npmjs.com/package/classnames.

在scss文件中，它有多个名称相同的类（小类和大类），如下所示:

.buttonA {
  &.small {
    height: 50px;
  }
  &.large {
    height: 80px;
  }
}

.buttonB {
  &.small {
    height: 20px;
  }
  &.large {
    height: 40px;
  }
}

这是tsx文件:

.buttonA {
  &.small {
    height: 50px;
  }
  &.large {
    height: 80px;
  }
}

.buttonB {
  &.small {
    height: 20px;
  }
  &.large {
    height: 40px;
  }
}

这让我很困惑，因为我不确定它会选择使用哪个“小”类，因为我们在SCSS中有两个。我想它会从buttonA中选择'small'类，因为它指定buttonA作为第一个参数？但这让我想知道这些参数是否相互依赖？如果我做classNames('button b'、'small')，或者简单地做classNames('small')呢？

顺晟科技：

我认为这里的问题是您高估了它的作用，并且可能误解了CSS和/或Sass是如何工作的。

只是动态地、有条件地连接字符串的一种方法。这就是它所做的全部--它不询问和理解任何可能应用于它所输出的字符串值的CSS。您甚至不必将它用于字符串值--您可以将它用于其他事情，如有条件地多元消息传递，如

.buttonA {
  &.small {
    height: 50px;
  }
  &.large {
    height: 80px;
  }
}

.buttonB {
  &.small {
    height: 20px;
  }
  &.large {
    height: 40px;
  }
}

您的Sass文件正在使用parent selector()将内部规则连接到父容器，以创建以下CSS输出: