CSS 模块的 CSS 特性

Question

首先，让我说我知道我有一个自定义组件“Card”，我在我的一条路线“Home”中使用它。

Card.js

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

Card.css

.card {
    display: block;
}

Home.js

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

Home.css

.testCard { display: none; }

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

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

Home.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-loader 自动修改为像

.Card-card-l2hne

这样的名称，因此从不同的组件引用它是行不通的。如果我将它导入到

Home.css

的 CSS 文件中，那也不起作用，因为它创建了一个名称类似于

.Home-card-lnfq

的新类，而不是引用

.Card-card-l2hna

。

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

举个例子，Home.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>
        );
    }
}

Home.css

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

这样，我们就不需要知道组件

Card

在内部使用什么类名，特别是因为在 CSS 模块或样式化组件等情况下，类名是一些唯一生成的名称。

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

Answer 2

只需通过组合类使 testCard 规则更具体

.card {display: block;}

.card.testCard { display: none; }

Answer 3

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

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

例如。在制作选择器

的情况下

.card 与 .card.testCard

.root > .testCard

（使用此处发布的示例）

计算出的特异性值为：

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

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

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

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

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