如何訪問外部組件的內部元素

Question

我有一個外部Select反應組件，這反過來又呈現li標籤。 我想風格所有li除了第一個012px20px;

下面是代碼：

const StyledSelect = styled(Select)` 
    li { 
    margin-left: 20px; 
    } 
` 

知道爲什麼這是不工作或另一種方式來做到這一點？

Answer 1

這應該可行，但根據外部Select如何應用樣式，它們可能具有更高的特異性，並且仍然覆蓋您應用的樣式。 （見this article的底漆上的特異性是如何工作的）

不知道你正在使用Select組件這是一個有點難以調試，但我假設它使用內嵌樣式（即style道具），它有一個非常高特異性，並因此會覆蓋您的應用風格。

如果外部組件不使用內聯樣式，有兩種方法可以改變樣式的特異性，這兩種方法都不推薦使用。

撞特異性的第一種方式是使用!important：

const StyledSelect = styled(Select)` 
    li { 
    margin-left: 20px!important; 
    } 
` 

在某些情況下，可能還不夠，而且它也很乏味，一旦你有你需要的強行覆蓋更多的屬性。一個更好的辦法，但仍然不建議太是使用類黑客：（注意＆符號）

const StyledSelect = styled(Select)` 
    &&& li { 
    margin-left: 20px; 
    } 
` 

什麼styled-components在這裏所做的是生成的類替換每個這些&，這意味着所產生的CSS會看起來像這樣：

.sc-asdf123.sc-asdf123.sc-asdf123 li { 
    margin-left: 20px; 
} 

這三個類大規模撞塊內的風格的特異性。這應該夠了吧！

---

爲了不樣式您可以用not僞選擇器一起使用first-child的第一個孩子：

const StyledSelect = styled(Select)` 
    &&& li:not(:first-child) { 
    margin-left: 20px; 
    } 
` 

Answer 2

你可以使用CSS僞類：

const StyledSelect = styled(Select)` 
    li:not(:first-child) { 
    margin-left: 20px; 
    } 
` 

瞭解更多CSS僞類：https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes