Styled Components の &(アンパサンド)について
Styled Components で & を使うと、自身のコンポーネントを参照します。
具体的な動きは、公式ドキュメントにわかりやすいサンプルが載っているのでご覧ください。
特に面白いのは&&のようにアンパサンドを二つ連続で記述するやり方です。
この場合は、以下のようなStyleになります。
.izBVou.izBVou {
color: blue;
}.izBVouはStyled Componentsによって自動で作成されるランダムな文字列のクラスです。
これが二つ連なるので、CSSが適用される優先度が上がります。
ドキュメントにも記載されていますが、バニラのCSSと共存させたときにStyled Componentsのスタイルが適用されないときは、&&を使って適用の優先度を上げることで解消されます。
Finally, the ampersand can be used to increase the specificity of rules on the component; this can be useful if you are dealing with a mixed styled-components and vanilla CSS environment where there might be conflicting styles: