投稿日
June 6, 2021
最終更新
June 6, 2021
カテゴリー
tech
タグ
React
styled-components内で子のコンポーネントのスタイルを指定したいとき。
コンポーネント名を含めて、指定してあげればよい。
export const App: VFC = () => {
return (
<div>
<ParentComponent>
<div>テキスト1</div>
<ChildComponent>テキスト2</ChildComponent>
</ParentComponent>
<ChildComponent>テキスト3</ChildComponent>
</div>
);
};
const ChildComponent = styled.div`
color: blue;
`;
const ParentComponent = styled.div`
color: red;
> ${ChildComponent} {
color: green;
}
`;https://styled-components.com/docs/advanced#caveat