CSS Specificity with CSS Module

Question

首先，让我说我知道我有一个自定义组件"卡"，我在我的一个路由"Home"中使用了它。

卡.js

import s from 'Card.css';
class Card {
...
render(){
return (<div className={cx(className, s.card)}>
{this.props.children}
</div>);
}
}

卡.css

.card {
display: block;
}

首页.js

<Card className={s.testCard}>
...
</Card>

首页.css

.testCard { display: none; }

我在这里遇到的一个问题是，即使我将显示设置为 none，卡片仍然可见，因为浏览器中看似随机的 CSS 排序。即使禁用了Javascript，此顺序也不会更改。

为了让 .testCard 在 .card 之后正确加载，我使用了"composes："：

首页.css

.testCard {
composes: card from 'components/Card.css';
display: none;
}

显然，这会导致css-loader认识到.testCard应该在.card之后加载。除了，如果我禁用Javascript，页面将恢复到旧行为：.card在.testCard之后加载，它再次变得可见。

让我们的页面优先考虑.testCard而不是在启用或未启用Javascript的情况下行为一致的卡的推荐方法是什么？

Answer 1

由于我使用的是CSS模块，charlietfl 解决方案不会真正按原样工作。.card会自动被 CSS 加载器修改为类似.Card-card-l2hne的名称，因此从其他组件引用它是行不通的。如果我将其导入到Home.css的CSS文件中，那也不起作用，因为它创建了一个名称为.Home-card-lnfq的新类，而不是引用.Card-card-l2hna。

我真的不认为有解决这个问题的好方法，所以我改用父类来更具体。

例如，主页.js：

import s from 'Home.css';
import Card from './components/Card';
class Home {
...
render(){
return (
<div className={s.root}>
<Card className={s.testCard}>Hi</Card>
</div>
);
}
}

首页.css

.root {
margin: 10px;
}
.root > .testCard {
display: none;
}

这样，我们就不需要知道Card内部使用什么类名组件，尤其是在 CSS 模块或样式化组件等情况下，类名是一些唯一的生成名称。

如果不是Charlieftl的解决方案，我认为我不会得出这个解决方案，所以非常感谢你。

Answer 2

只需通过组合类使测试卡规则更具体

.card {display: block;}
.card.testCard { display: none; }

Answer 3

Css 特异性是根据所使用的选择器计算的。 元素选择器的值为 1 类选择器的值为 10 ID 选择器的值为 100 内联 css 的值为 1000。

因此，如果您使用上面的这些规则指定更多，则可以实现应用哪个规则。

例如，在制作选择器的情况下

.card vs .card.testCard

.root> .testCard

(使用此处发布的示例(

计算出的特异性值为：

• .card = 10
.
• card.testCard = 100
• .root> .testCard = 100

因此，通过添加类、ID 或元素来使用更指定的选择器会增加特异性点，并应用具有最高特异性值的规则。

警告：如果指向同一元素的选择器具有相同的值，则以最新规则为准。 所以在这里的例子中

<style>
.card.testCard { color: red; }
.root > .testCard { color: green; }
</style>

此处选择的样式将是绿色，即使两者都具有相同的特异性，因为最新的规则获胜。