テーマ設定-コンポーネント
💅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> ); } }
これで、希望する結果が得られ、暗い背景によりうまくフィットします。
この方法では、プロパティの規則を作成し、必要なスタイルに基づいてテーマを編集することで、さまざまなプレゼンテーションを試すことができます。