Styled Componentsを使用したボタンの作成方法

方法1: 基本的なスタイルの適用 まず、styled-componentsパッケージをインストールします。

npm install styled-components

次に、以下のようなコードを書きます。

import styled from 'styled-components';
const Button = styled.button`
  background-color: #e91e63;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
`;
// 使用例:
function App() {
  return (
    <div>
      <Button>クリックしてください</Button>
    </div>
  );
}

このコードでは、styled.buttonメソッドを使用してButtonコンポーネントを作成しています。``内のスタイルは、通常のCSSと同様に書くことができます。

方法2: プロップスを使用したスタイルの変更 styled-componentsでは、プロップスを使用してスタイルを動的に変更することもできます。例えば、ボタンの色をプロップスで指定できるようにするには、以下のように書きます。

import styled from 'styled-components';
const Button = styled.button`
  background-color: ${props => props.color || '#e91e63'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
`;
// 使用例:
function App() {
  return (
    <div>
      <Button color="#3f51b5">クリックしてください</Button>
    </div>
  );
}

この例では、colorプロップスを使用してボタンの背景色を指定しています。指定されたプロップスがない場合は、デフォルトの色が使用されます。

以上が、Styled Componentsを使用してボタンを作成する方法の例です。これらの方法を使って、さまざまなスタイルのボタンを作成できます。