React スタイルのコンポーネント

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

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 <StyledButton> Login </StyledButton>;
}

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

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

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 (
    <div>
      <StyledButton bg="black">Button A</StyledButton>
      <StyledButton bg="blue">Button B</StyledButton>
    </div>
  )
}

テーマ設定

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

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

import { ThemeProvider } from 'styled-components';

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

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

const App = () => (
  <ThemeProvider theme={theme}>
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  </ThemeProvider>
);

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

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 アプリケーションのスタイルを設定するための最新かつ効率的なアプローチを提供します。小規模なプロジェクトで作業している場合でも、大規模なアプリケーションで作業している場合でも、スタイル付きコンポーネントはスタイルを整理し、コードをきれいに保つのに役立ちます。

以上がReact スタイルのコンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。