styledの引数に React コンポーネントを渡すとレンダリング時、そのプロパティに Styled Components がランダムに生成したclassNameが渡されます。
const Foo = props => {
return ...
};
const StyledFoo = styled(Foo)`
color: orange;
`;
// ...コンポーネントの構造が複雑な時、それら全てにclassNameをクラスに付与することで.scope.my-classNameのようなスコープを付きのセレクタでスタイル付けできるようになります。
またその時styledの中で.scopeは&と書くことができるので、実際には&.my-classNameと書くことができます。
const Foo = props => {
return (
...
);
};
const StyledFoo = styled(Foo)`
&.first {
color: orange;
}
&.second {
width: 980px;
margin: 0 auto;
}
&.third {
display: inline-flex;
}
`;
