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