Best way to define styled-components

_best-way-to-define-styled-components.md

以下のように、component selector パターン を使用することで、 React.Component のインスタンス (A.jsx) などの Styled Component 以外のコンポーネントをセレクターとして指定できる。

A.jsx

class A extends React.Component {
  render() {
    return <div />
  }
}

export default A;

B.jsx

import A from './A';

const StyledA = styled(A)``;

const B = styled.div`
  ${StyledA} {
  }
`

export default B;

ただし、import 元で A コンポーネントを styled() ファクトリー関数で毎度ラップするの冗長な記述である。
そのため、import 先の全てのコンポーネントは React.Component のインスタンスとして export するのではなく、 Styled Component として export する のが Best Way となる。

A.jsx

class A extends React.Component {
  render() {
    return <div className={this.props.className} />
  }
}

export default styled(A)``;

B.jsx

import A from './A';

const B = styled.div`
  ${A} {
  }
`

export default B;

Bad.jsx

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

const Hello = () => (
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

export default Hello;

Good.jsx

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Hello = ({ className }) => (
  <div className={className}>
    <Title>
      Hello World!
    </Title>
  </div>
);

export default styled(Hello)`
  padding: 4em;
  background: papayawhip;
`;

Good.tsx

import * as React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

interface IProps {
  className?: 'string';
}

const Hello: React.SFC<IProps> = ({ className }) => (
  <div className={className}>
    <Title>
      Hello World!
    </Title>
  </div>
);

export default styled(Hello)`
  padding: 4em;
  background: papayawhip;
`;