スタイル付きコンポーネントとは何ですか?

Styled Components は、開発者が JavaScript コード内に直接 CSS を記述できるようにする React の人気のあるライブラリです。このライブラリは、タグ付きテンプレート リテラルを利用してコンポーネントのスタイルを設定します。これにより、コンポーネント レベルのスタイルの使用が促進され、スタイルと要素の構造に関する懸念が分離され、コード全体がより保守しやすくなります。

スタイル付きコンポーネントを使用する利点

1.動的スタイリング: スタイル付きコンポーネントを使用すると、JavaScript を使用して、props、state、またはその他の変数に基づいてスタイルを動的に設定できます。

2.より良い組織: スタイルが影響するコンポーネントの近くにスタイルを置くと、コードがよりモジュール化され、管理が容易になります。

3.クラス名のバグなし: スタイルのスコープはコンポーネントに限定されているため、クラス名の衝突や、従来の CSS によくある特異性の問題について心配する必要はありません。

4.テーマのサポート: スタイル付きコンポーネントはテーマのサポートを組み込み、アプリケーション全体に一貫したスタイルを簡単に適用できるようにします。

スタイル付きコンポーネントのインストール

スタイル付きコンポーネントの使用を開始するには、npm または Yarn 経由でインストールする必要があります:

npm install styled-components

or

yarn add styled-components

基本的な使い方

これは、スタイル付きコンポーネントがどのように機能するかを示す基本的な例です:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return  Login ;
}

小道具に基づいて適応する

スタイル付きコンポーネントは機能するため、要素を動的に簡単にスタイル設定できます。

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    

      Button AButton B
  )
}

テーマ設定

スタイル付きコンポーネントはテーマ設定もサポートしているため、一連のスタイル (色、フォントなど) を定義し、アプリケーション全体に一貫して適用できます。

まず、テーマを定義します:

import { ThemeProvider } from 'styled-components';

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

次に、アプリケーションを ThemeProvider でラップし、テーマを渡します。

const App = () => (
  

      Primary Button
      Default Button
    
  
);

最後に、スタイル付きコンポーネントのテーマ プロパティにアクセスします:

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

結論

Styled Components は、アプリケーションの保守性と拡張性の向上を目指す React 開発者にとって強力なツールです。スタイル付きコンポーネントは、コンポーネント内にスタイルをカプセル化し、JavaScript の機能を最大限に活用することにより、Web アプリケーションのスタイルを設定するための最新かつ効率的なアプローチを提供します。小規模なプロジェクトで作業している場合でも、大規模なアプリケーションで作業している場合でも、スタイル付きコンポーネントを使用すると、スタイルを整理し、コードをきれいに保つことができます。