はじめに
styled-componentsを使っていて、特定の書き方をした際にスタイルが正常に適用されない問題が発生していましたが、解決したのでその方法をまとめます。
問題
以下のようにコンポーネントをラップしてスタイルを当てたとき、ラップ側で定義したスタイルが適用されないことがありました。
const ProgressLabelWrap = styled(ProgressLabel)`
margin-left: 20px;
min-width: 70px;
`;
解決方法
この問題を解決するためには、ProgressLabel コンポーネント側で className を受け取り、その className をコンポーネント内の一番親の要素のclassNameプロパティに渡してあげる必要がありました。
const ProgressLabel = (props) => {
return (
<Content className={props.className}>
{props.children}
</Content>
);
};
なぜclassNameを渡す必要があるのかというと、styled-componentsは内部的にclassNameを通じてスタイリングを行なっており、classNameを渡さずにstyled(MyComponent)という記法でスタイルを定義した場合、スタイルが正しく適用されないそうです。（公式参照）
おわりに
この問題の原因特定までに時間がかかりましたが、無事に解決できてスッキリしました。もし同じような問題に直面している方の助けになれば幸いです。
Discussion