使用classnames拼接类名时如何匹配SCSS中的同名嵌套类？

核心前提：classnames的本质 #

classnames是纯字符串拼接工具，仅负责将你传入的所有真值参数拼接为空格分隔的类名字符串，本身完全不参与CSS样式匹配逻辑，传入的参数之间没有任何依赖关系。

你给出的SCSS代码编译为原生CSS后实际是以下规则：

/* 仅同时有buttonA和small类的元素才会命中该规则 */
.buttonA.small {
  height: 50px;
}
.buttonA.large {
  height: 80px;
}
/* 仅同时有buttonB和small类的元素才会命中该规则 */
.buttonB.small {
  height: 20px;
}
.buttonB.large {
  height: 40px;
}

样式命中是CSS选择器的规则决定的，和classnames无关。

疑问解答 #

• 调用classNames('buttonA', 'small')时，最终返回的类名字符串是buttonA small，相当于给元素同时添加了buttonA和small两个独立类，按照CSS规则，同时包含这两个类的元素会命中.buttonA.small的样式，高度为50px。
• classnames的参数之间不存在任何依赖关系，你观察到的匹配效果完全是CSS多类选择器的特性导致的，和classnames本身的逻辑无关。
• 调用classNames('buttonB', 'small')时，返回的类名字符串是buttonB small，元素会命中.buttonB.small的规则，高度为20px。
• 仅调用classNames('small')时，返回的类名字符串只有small，你给出的CSS规则中没有单独匹配.small类的样式，所以这个类不会产生任何生效的高度样式，除非你额外定义了全局的.small样式规则。

内容的提问来源于stack exchange，提问作者flyingbee