Styled Components を使って React コンポーネントをスタイリング: props と TypeScript を含む

2024-06-20

Styled Components を使って React コンポーネントにスタイルを適用する方法（props と TypeScript を含む）

TypeScript を使用すると、Styled Components で使用する props の型を定義することができます。これにより、コンポーネントの型安全性と開発者のエクスペリエンスが向上します。

Styled Components を使用する基本的な方法は次のとおりです。

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

export default Button;

このコードは、Button という名前の styled component を定義します。このコンポーネントは <button> タグに基づいており、青色の背景、白いテキスト、パディング、ボーダーなし、ポインターカーソルを備えています。

props を使用してスタイルを動的にする

Styled Components では、props を使用してスタイルを動的にすることができます。これにより、コンポーネントの外観をコンポーネントが使用されるコンテキストに応じて変更することができます。

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.color || 'blue'};
  color: ${props => props.textColor || 'white'};
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

export default Button;

このコードは、color と textColor という 2 つの props を受け取る Button コンポーネントを定義します。これらの props が提供されない場合、デフォルトの色が使用されます。

TypeScript で props の型を定義する

import styled from 'styled-components';

interface ButtonProps {
  color?: string;
  textColor?: string;
}

const Button = styled.button<ButtonProps>`
  background: ${props => props.color || 'blue'};
  color: ${props => props.textColor || 'white'};
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

export default Button;

このコードは、ButtonProps という名前のインターフェースを定義します。このインターフェースには、color と textColor という 2 つのプロパティがあります。これらのプロパティはどちらもオプションであり、文字列型です。

Button コンポーネントは、ButtonProps 型のジェネリック型として定義されています。これは、コンポーネントが ButtonProps インターフェースで定義されたプロパティのみを受け入れることを意味します。

Styled Components と TypeScript を組み合わせることで、React コンポーネントにスタイルを適用するための強力で型安全な方法を提供することができます。これにより、コードをより読みやすく、保守しやすく、エラーが発生しにくくすることができます。

サンプルコード：Button コンポーネント

import styled from 'styled-components';

interface ButtonProps {
  color?: string;
  textColor?: string;
}

const Button = styled.button<ButtonProps>`
  background: ${props => props.color || 'blue'};
  color: ${props => props.textColor || 'white'};
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

export default Button;

このコードをどのように使用するかを次に示します。

import Button from './Button';

const MyComponent = () => {
  return (
    <div>
      <Button>デフォルトのボタン</Button>
      <Button color="red">赤いボタン</Button>
      <Button textColor="green">緑色のテキストを持つボタン</Button>
      <Button color="red" textColor="green">赤色の背景と緑色のテキストを持つボタン</Button>
    </div>
  );
};

export default MyComponent;

このコードは、4 つの Button コンポーネントをレンダリングします。最初のボタンはデフォルトのスタイルでレンダリングされます。 2 番目のボタンは赤い背景色でレンダリングされます。 3 番目のボタンは緑色のテキストカラーでレンダリングされます。 4 番目のボタンは赤い背景色と緑色のテキストカラーでレンダリングされます。

説明

このサンプルコードは、Styled Components と TypeScript を使用して React コンポーネントにスタイルを適用する方法を示しています。

styled 関数は、React コンポーネントを受け取り、styled component を返します。
ButtonProps インターフェースは、Button コンポーネントが受け取る props の型を定義します。
color と textColor props は、ボタンの色とテキストの色を制御するために使用されます。
テンプレートリテラルを使用して、props の値に基づいてスタイルを動的に設定できます。
TypeScript を使用すると、コンポーネントの型安全性と開発者のエクスペリエンスが向上します。

このサンプルコードを独自のカスタムコンポーネントを作成する出発点として使用できます。

Styled Components を使用して React コンポーネントにスタイルを適用するその他の方法

コンポーネント拡張を使用して、既存の styled component のスタイルを拡張することができます。これは、コンポーネントのバリエーションを作成したり、既存のコンポーネントにマイナーな変更を加えたりする場合に役立ちます。

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

const PrimaryButton = styled(Button)`
  background: green;
`;

export default Button;
export { PrimaryButton };

このコードは、Button コンポーネントと PrimaryButton コンポーネントを定義します。PrimaryButton コンポーネントは Button コンポーネントを拡張し、背景色を緑色に変更します。

テーマを使用して、コンポーネント全体にわたってスタイルを共有することができます。これにより、コードをより一貫性があり、保守しやすくなります。

import styled from 'styled-components';

const theme = {
  colors: {
    primary: 'blue',
    secondary: 'gray',
  },
};

const Button = styled.button`
  background: ${props => props.theme.colors.primary};
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
`;

export default Button;

このコードは、theme オブジェクトを定義します。このオブジェクトには、colors プロパティがあり、その中にはプライマリ色とセカンダリ色を定義するプロパティがあります。

Button コンポーネントは、theme オブジェクトからプライマリ色を取得して、ボタンの背景色を設定します。

CSS in JS ライブラリを使用して、Styled Components と一緒にスタイルを定義することができます。これにより、より多くの柔軟性と制御が可能になります。

いくつかの人気のある CSS in JS ライブラリを次に示します。

emotion
JSS
Aphrodite
Styled JSS

これらのライブラリはそれぞれ独自の長所と短所があるため、ニーズに合ったライブラリを選択することが重要です。

カスタムスタイル関数を使用して、複雑なスタイルを定義することができます。これにより、コードをより簡潔で、再利用しやすくなります。

import styled from 'styled-components';

const buttonStyles = (props) => ({
  background: props.color || 'blue',
  color: props.textColor || 'white',
  padding: 10px 20px,
  border: none,
  cursor: 'pointer',
});

const Button = styled.button`
  ${buttonStyles}
`;

export default Button;