テーマ設定-コンポーネント

提供：Dev Guides
移動先:案内、検索

💅styled-componentsは、ReactでCSSを処理するための優れた方法です。 styled-componentsを初めて使用する場合は、記事 styled-components、ReactでCSSを処理する最新の方法を確認してください。

この投稿では、簡単な電子メールニュースレターの購読フォームを作成し、スタイル付きコンポーネントを使用して外観を処理します。

Reactボイラープレートを使用したセットアップ

ReactBoilerplateアプリケーションのセットアップから始めます。 ただし、必要に応じて、 Create ReactAppを使用して開始することもできます。

この定型文の詳細な説明については、https://www.reactboilerplate.com/を確認してください。


新しいプロジェクトを作成するには、ボイラープレートGitHubリポジトリのクローンを作成します。 

$ git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git

そして、サンプルアプリを削除してクリーンな状態から開始し、アプリを開始します。 

$ npm run clean
$ npm start

サンプルフォームの作成

それでは、メール登録フォームを作成しましょう。 styled-componentsを使用して独自のコンポーネントでサインアップフォームを作成し、適切にレンダリングします。

Form、Title、Button、Inputの4つのスタイル付きコンポーネントを作成しましょう。

各コンポーネントはフォームのごく一部を表しており、それぞれにいくつかのCSSルールを追加します。

components / SignupForm / index.js 

import React from 'react';
import styled from 'styled-components';

const Form = styled.form`
  margin: 0 auto;
  width: 50%;
  min-width: 400px;
  max-width: 800px;
  text-align: center;
  border: 1px solid #ddd;
  padding-top: 0px;
  padding-bottom: 90px;
  color: black;
  background: white;
`;

const Title = styled.h2`
  margin-top: 40px;
  margin-bottom: 70px;
  font-size: 1.5em;
  color: black;
  background-color: white;
`;

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`;

const Input = styled.input`
  font-size: 1.45em;
  border: 1px solid #ddd;
`;

次に、スタイリング部分に焦点を当てたいので、指定された電子メールを出力する単純なconsole.log()を使用して送信イベントを処理する単純なコンポーネントを作成します。 

import React from 'react';

export default class SignupForm extends React.Component {

  signUp = (e) => {
    const email = new FormData(e.target).get('email');
    e.preventDefault();
    console.log(`New signup from ${email}`);
  }

  render() {
    return (
      <Form onSubmit={this.signUp}>
        <Title>
          Sign up to my newsletter
        </Title>
        <Input type="email" name="email" />
        <Button>Sign up</Button>
      </Form>
    );
  }
}

次に、React Boilerplateが作成したHomePageコンポーネントにインポートし、<SignupForm />をレンダリングします。

コンテナ/ホームページ/index.js 

import React from 'react';
import SignupForm from '../../components/SignupForm';

export default class HomePage extends React.Component {
  render() {
    return (
      <SignupForm />
    );
  }
}

これで、フォームがアプリケーションに適切に表示されるはずです。

CSSには、さまざまなコンポーネントで使用されるいくつかの異なるプロパティがあります。背景色と前景色、境界線の色、テキストの色です。

フォームが1ページだけだったため、色が固定されましたが、要件が変更され、背景や配色が異なるさまざまなページにフォームを追加する必要があると言われました。

コンポーネントを再利用可能にする必要があり、テーマを使用して再利用できます。

テーマの作成

テーマは、すべてのコンポーネントをThemeProviderラッパーコンポーネントでラップし、スタイル付きコンポーネントCSSでprops.themeのプロパティを参照することによって作成されます。 

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';

const Form = styled.form`
  /* other properties */
  border: 1px solid ${(props) => props.theme.borderColor};
  color: ${(props) => props.theme.primaryColor};
  background-color: ${(props) => props.theme.secondaryColor};
`;

const Title = styled.h2`
  /* other properties */
  background-color: ${(props) => props.theme.secondaryColor};
  color: ${(props) => props.theme.primaryColor};
`;

const Button = styled.button`
  /* other properties */
  background-color: ${(props) => props.theme.primaryColor};
  color: ${(props) => props.theme.secondaryColor};
`;

const Input = styled.input`
  /* other properties */
  border: 1px solid ${(props) => props.theme.borderColor};
`;

テーマオブジェクトを作成します。これは、styled-componentsで参照するプロパティを持つオブジェクトリテラルです。 

const theme = {
  secondaryColor: 'white',
  primaryColor: 'black',
  borderColor: '#ccc',
};

最後に、FormコンポーネントをThemeProviderラッパーコンポーネントでラップします。 

export default class SignupForm extends React.Component {

  /* ... */

  render() {
    return (
      <ThemeProvider theme={theme}>
        <Form onSubmit={this.signUp}>
          <Title>
            Sign up to my newsletter
          </Title>
          <Input type="email" name="email" />
          <Button>Sign up</Button>
        </Form>
      </ThemeProvider>
    );
  }
}

これは、スタイル付きコンポーネントを使用してテーマを設定するための基本的な方法です。 すべてのテーマスタイルをthemeオブジェクトに配置し、すべてのコンポーネントがそれらのスタイルを使用します。

再利用可能なテーマの作成

次に、サインアップフォームをページに2回追加します。 1回目はページの背景が明るく、2回目は暗くなります。

これを行うには、ReactBoilerplateによって自動的に含まれるファイルであるapp/global-styles.cssにいくつかの簡単なCSSルールを追加します。 

.container.dark {
  background: #282828;
}

SignupFormコンポーネントをcontainerクラスを使用するクラスでラップでき、darkクラスが存在すると暗くなります。

コンテナ/ホームページ/index.js 

import React from 'react';
import SignupForm from '../../components/SignupForm';

export default class HomePage extends React.Component {
  render() {
    return (
      <main>
        <div className="container">
          <SignupForm />
        </div>
        <div className="container dark">
          <SignupForm />
        </div>
      </main>
    );
  }
}

2番目のフォームを暗い背景でうまくブレンドし、親指の痛みのように目立たせたくない場合はどうなりますか？ HomePageコンポーネントのrender()メソッドのSignupFormにdark小道具を追加します。 

return (
  <main>
    <div className="container bright">
      <SignupForm />
    </div>
    <div className="container dark">
      <SignupForm dark />
    </div>
  </main>
);

そして、SignupFormコンポーネントのconstructor()メソッドで小道具を探し、存在する場合はダークテーマを使用します。 

export default class SignupForm extends React.Component {

  constructor(props) {
    super(props);

    this.theme = {
      secondaryColor: 'white',
      primaryColor: '#282828',
      borderColor: '#ccc',
    };

    if (props.dark) {
      this.theme.secondaryColor = '#282828';
      this.theme.primaryColor = '#fff';
    }
  }

  /* ... */

  render() {
    return (
      <ThemeProvider theme={this.theme}>
        <Form onSubmit={this.signUp}>
          <Title>
            Sign up to my newsletter
          </Title>
          <Input type="email" name="email" />
          <Button>Sign up</Button>
        </Form>
      </ThemeProvider>
    );
  }
}

これで、希望する結果が得られ、暗い背景によりうまくフィットします。


この方法では、プロパティの規則を作成し、必要なスタイルに基づいてテーマを編集することで、さまざまなプレゼンテーションを試すことができます。

「https://www.finddevguides.com/index.php?title=テーマ設定-コンポーネント&oldid=101429」から取得
Powered by MediaWiki