[CSS in JS] propsへのアクセス（interpolation）の書き方を考える

概要

CSS in JSにおけるテンプレートリテラル記法にて、propsへのアクセスする記述は「interpolation」と呼ばれるらしい。

You can pass a function ("interpolations") to a styled component's template literal to adapt it based on its props.
https://styled-components.com/docs/basics#adapting-based-on-props

propsへアクセスしている例は以下のようなコード。

const Button = styled.button<{ isPrimary?: boolean }>`
  background: ${(props) => (props.isPrimary ? '#BF4F74' : 'white')};
  color: ${(props) => (props.isPrimary ? 'white' : '#BF4F74')};
`;

書き方

上記のような三項演算子を用いた出し分け方法は、値を返しているだけなのでそこまで可読性に難があるわけではない。ただ、値だけではなくプロパティごとに出し分けをしたりすると可読性は下がっていくため、シンプルに記述できる方法を考える。

1.分割代入

分割代入を使ってpropsを受け取ることで、propsを直接参照できる。props.を省略できるため、そのぶんコードが短くなる。

const Button = styled.button<{ isPrimary?: boolean }>`
  background: ${({ isPrimary }) => (isPrimary ? '#BF4F74' : 'white')};
  color: ${({ isPrimary }) => (isPrimary ? 'white' : '#BF4F74')};
`;

2.関数でpropsを受け取る

スタイル定義を関数に書くことでpropsを直接受け取ることができる。そうすることでプロパティごとにアクセスする必要がなくなる。

const Button = styled.button<{ isPrimary?: boolean }>(
  (props) => `
    background: ${props.isPrimary ? '#BF4F74' : 'white'};
    color: ${props.isPrimary ? 'white' : '#BF4F74'};
  `,
);

3.分割代入と関数（1と2の組み合わせ）

最終的に分割代入と関数化を組み合わせることで、最もシンプルに記述できる。

const Button = styled.button<{ isPrimary?: boolean }>(
  ({ isPrimary }) => `
    background: ${isPrimary ? '#BF4F74' : 'white'};
    color: ${isPrimary ? 'white' : '#BF4F74'};
  `,
);