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

Card.js

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

卡片. css

.card {
    display: block;
}

Home.js

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

Home.css

.testCard { display: none; }

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

为了得到。测试卡正确加载后。卡，我用“作曲:

Home.css

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

显然，这导致css-loader认识到这一点。testCard应该在. Card之后加载。除非我禁用了Javascript，否则页面会恢复到原来的行为。之后加载卡。测试卡，它又变得可见。

有什么推荐的方法可以让我们的页面优先排序？在启用或不启用Javascript的情况下，行为一致的卡上的测试卡？

由于我使用的是CSS模块，charlietfl解决方案实际上不能正常工作。。卡会自动被改成类似。Card-card-l2hne，所以从不同的组件引用它是行不通的。如果我把它导入Home.css的CSS文件，那也不行，因为它创建了一个名为。家庭卡信息，而不是指。卡-卡-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;
}

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

如果没有charlieftl的解决方案，我想我不会有这个解决方案，所以非常感谢你。

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

.card {display: block;}

.card.testCard { display: none; }

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

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

比如说。在制造选择器的情况下

。卡对卡。测试卡

。root & gt。测试卡

(使用此处发布的示例)

计算的特异性值为:

。卡= 10 . card.testCard = 100 。root & gt。测试卡= 100 因此，通过添加类、id或元素来使用更多指定的选择器增加了特异性点，并应用具有最高特异性值的规则。

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

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

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