【styled-components】styled(Component)でクラス名が付与されない

あまりにも何回もやってしまうのでメモ。

styled-componentsではstyled.divとする以外に、既存のコンポーネントにstyled(Component)とする方法がある。

styled.div

import styled from "styled-components"

export const Component = styled.div`
  display: flex
  align-items: center
  justify-content: center
`

styled()

import styled from "styled-components"
import { BaseComponent } from "../components"

export const Component = styled(BaseComponent)`
  display: flex
  align-items: center
  justify-content: center
`

classNameを記述

React.FCコンポーネントをstyled(Component)でスタイリングする場合、classNameを受け取れるようにしておく必要がある。

OK

import React from 'react';

type Props = {
  className?: string;
};

const BaseComponent: React.FC<Props> = props => {
  return (
    <div className={props.className}>
      <div className="flex-center">{props.children}</div>
    </div>
  );
};

export const Component = styled(BaseComponent)`
  .flex-center {
    display: flex
    align-items: center
    justify-content: center
  }
`;

• next.jsでの例。
  クラス名が注入されていることがわかる。
  

NG

import React from 'react';

const BaseComponent: React.FC= props => {
  return (
    <div>
      <div className="flex-center">{props.children}</div>
    </div>
  );
};

export const Component = styled(BaseComponent)`
  .flex-center {
    display: flex
    align-items: center
    justify-content: center
  }
`;

当たり前だが、コンポーネントがクラス名を受け取れないためクラス名が付与されない。