如何將CSS類傳遞給React子節點並確保它們將覆蓋子節點的本地類？

Question

我有一個<Parent />組件，只有一個<Child /> ：

<Parent>
    <Child />
</Parent>

我想將父類的CSS類傳遞給<Child /> ，所以我這樣做：

<Parent>
    <Child className={ styles.pill } />
</Parent>

<Child />有一個className prop，並使用classnames包應用該類，如下所示：

<div className={ classNames(styles.pill, props.className) } />

但是你看到<Child />有一個名為styles.pill的類， styles.pill具有以下樣式：

.pill {
    align-content: stretch;
    align-items: center;
    color: var(--grey__text--dark);
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

父傳入的類包含以下樣式：

.pill {
    align-items: flex-end;
    flex-flow: column wrap;
}

使用此設置，我無法保證從父項傳入的樣式將覆蓋<Child />組件中的樣式，這正是我希望它們執行的操作。 目前你永遠不會知道哪一個會勝過另一個。 對於項目的每個構建來說，它似乎是隨機的。

如何確保從父類傳入的類中的CSS屬性覆蓋Child組件中的任何類似屬性？

Answer 1

這是CSS特異性的問題 ，有很多方法可以確保覆蓋。

1. 多選擇器技巧，為了擴大特異性，你可以通過復制類名來使選擇器大小加倍，在你的情況下， .pill.pill { ...}將比原來更具體，因此會覆蓋樣式。

2. 使用!important ，你可以指定在父類中， .pill的聲明最后會包含!important 。

3. 多個不同的選擇器 ，父級將傳遞另外的不同className ，該子組件將解析， .pill.parent-pill {...} ，父級將.parent-pill類傳遞給子級。

這些只是3種簡單的方式來覆蓋兒童風格還有更多。

Answer 2

您可以使用Object.assign將一個/多個對象合並到目標對象中，為每個后續對象提供優先級：

 const foo = { a: '1', b: '2' } const bar = { a: '3' } console.log(Object.assign(foo, bar));