More than 1 year has passed since last update.

styled-componentsの指定方法(typescript)

Last updated at 2022-10-02Posted at 2022-10-02

書いては忘れての繰り返しなので備忘録としてまとめておく。

指定方法1

オブジェクトで指定するやり方。
上書きする場合はスプレッド構文とstateを使う。

const Button1 = styled.button<{param1: string}>((props) => ({
  color: props.param1,
  /*
  ...{
      state && color: "red"
  }
  */
}));

cssの記法をそのまま使える。
疑似要素も記述可能。

const Button3 = styled.button<{param1: string}>`
  color: ${(props) => props.param1};
  &:hover {
      color: "red";
  }
`;

指定方法2の亜種。
あまりみない。

const Button2 = styled.button`
  color: ${(props: {param1: string}) => props.param1};
`;