时间戳

首页 > 解决方案 > React 库：如何设置类特异性

javascript - React 库：如何设置类特异性

问题描述

好的，所以，我有一个将 className 作为道具的组件，但组件本身带有默认样式。

 className={`${
    props.classNameStyle ? `${styles.defaultButtonStyle} ${props.classNameStyle}` : styles.defaultButtonStyle
  }

如果 className prop 存在，它应该将默认类和作为 prop 传递的类都作为类放置，否则，只放置默认类。它可以工作，但是，我希望作为 prop 传递的类具有比默认按钮更大的 CSS 特异性，因为，假设我们有：

.defaultButtonStyle { background-color:red }

和

.classNameStyle { background-color:blue } (this is the class from props)

它应该使背景颜色为蓝色，但在浏览器的控制台中，它的 classNameStyle 被剪切，并且背景颜色设置为默认按钮样式。我不想使用！important，因为这会让用户感到厌烦。有任何想法吗？

标签： javascripthtmlcssreactjs

解决方案

推荐阅读