styled-componentsで子のDOMにstyleを指定する

styled-componentsで子にstyleをあてたい

reactの外部ライブラリを使っていたりすると、内部で階層的にDOMを生成してしまって、直接子のDOMを触れないケースがたまにある。

class名だけ指定できたりするが、styleを指定できないとき、styled-componentsのようなコンポーネントをラップしてstyleをあてる場合には困る。

例えば, なんらかのライブラリコンポーネントLibraryComponentがあったとき、styledで括ればスタイルをあてられる。

しかし、その下にclass名library-generatedのコンポーネントをライブラリが勝手に作るような場合に、styleをあてられない。

        <StyledLibraryComponent>
          <div className="library-generated">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
        </StyledLibraryComponent>

そのときには、実はsassっぽく & で繋ぐとclass名でstyleをあてられる。

const StyledLibraryComponent = styled(LibraryComponent)`
  color: white;
  display: flex;
  & .library-generated {
    display: flex;
    color: red;
  }
`;

たまにこういうのを知ってると応用がきくので、知っておくとよさそう。