首先，我知道我有一個自定義組件“卡”，我在我的一條路線“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。

因此，如果您使用以上這些規則指定更多，您可以實現應用哪個規則。

比如說。在制造選擇器的情況下

?？▽āy試卡

。root & gt。測試卡

(使用此處發布的示例)

計算的特異性值為:

。卡= 10 . card.testCard = 100 。root & gt。測試卡= 100 因此，通過添加類、id或元素來使用更多指定的選擇器增加了特異性點，并應用具有最高特異性值的規則。

警告:如果指向同一個元素的選擇器有相同的值，那么最新的規則獲勝。 所以在這個例子中

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

此處選擇的樣式將是綠色，即使兩者具有相同的特性，因為最新的規則獲勝。