Styled Componentsを使ったUIのスタイリング:基本と応用の方法

1. 基本的な使い方: Styled Componentsを使用するには、まずstyledコンポーネントを作成します。これは、通常のReactコンポーネントと同じように作成できますが、スタイルを適用するために特別な構文を使用します。例えば、次のように書くことができます:

import styled from 'styled-components';
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: darkblue;
  }
`;
const App = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
};

2. プロップスを使用してスタイルを変更する: Styled Componentsでは、プロップスを使用してスタイルを動的に変更することもできます。例えば、以下のように書くことができます:

import styled from 'styled-components';
const Button = styled.button`
  background-color: ${(props) => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    background-color: ${(props) => props.primary ? 'darkblue' : 'darkgray'};
  }
`;
const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

3. グローバルスタイルの適用: Styled Componentsでは、グローバルスタイルを適用することもできます。これは、アプリケーション全体のスタイルを定義するのに便利です。例えば、以下のように書くことができます:

import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
  body {
    background-color: lightgray;
    font-family: 'Arial', sans-serif;
  }
`;
const App = () => {
  return (
    <div>
      <GlobalStyle />
      <h1>Hello, World!</h1>
    </div>
  );
};

以上が、Styled Componentsの基本的な使い方といくつかの応用例です。これらの例を参考にして、自分のReactプロジェクトでStyled Componentsを活用してみてください。素晴らしいUIデザインを実現するための強力なツールです。