外部コンポーネントの内部要素へのアクセス方法

Question

外部コンポーネントSelectは、liタグをレンダリングする外部コンポーネントを持っています。 liの最初の文字を除いて、すべてmargin-leftの20pxを使用しています。

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

任意のアイデアは、なぜこれが動作していないか、これを行うための別の方法：以下

は、コードのですか？

Answer 1

これはうまくいくはずですが、外部のSelectのスタイルがどのように適用されているかによって、より高い特異性を持ち、依然として適用したスタイルをオーバーライドしている可能性があります。お使いのSelectコンポーネント、それは少し難しいデバッグするのですが、私はそれが非常に持っているインラインスタイル（すなわちstyle小道具）を使用していますと仮定している知らない

（特異性がどのように動作するかのプライマーのためのthis articleを参照してください）高い特異性を示し、適用されるスタイルをオーバーライドします。

外部コンポーネントがインラインスタイルを使用していない場合、はお勧めできません。スタイルの特異性をバンプする2つの方法があります。

特異性をバンプする最初の方法は!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; 
} 

これらの3つのクラスは、ブロック内のスタイルの特異性を大幅に低下させます。それはトリックを行う必要があります！

---

あなたはnot疑似セレクタと一緒にfirst-childを使用することができ、最初の子のスタイルではないために：あなたはCSSの擬似クラスを使用することができます

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

Answer 2

を：

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

は、詳細を読みますCSS擬似クラス：https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-classes