はじめに

Reactコンポーネントのスタイル設定には多くのアプローチがありますが、この記事ではそれらのいくつかを取り上げます。しかし、まず第一に、物語が基づいている重要なポイントを決定します。

Reactの使用は、Webアプリケーションのビューがコンポーネントに分割され、それぞれが何らかの形で独自の表示と機能を担当することを前提としています。
babel 、 webpack 、 browserify 、 gulp 、 post -cssプロセッサーなどの最新の開発ツールが使用されることが理解されています。
そのような決定の時は過去です：

<!doctype html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

autoprefixerのようなツールがあり、もうこのようなCSSを手で書く必要はありません：

 background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Reactは、クライアントとサーバーの両方でレンダリングできます。この素晴らしい機会を利用する多くのプロジェクトがあります。これは未来です。

DOMElementsのスタイル設定について

Reactコンポーネントは、実際のHTMLでレンダリングされます。 DOMElementsで。 DOMElementの表示をカスタマイズするには、2つの方法があります。

外部CSSスタイル（ページレイアウトのスタイルタグ、またはリンクタグを介したスタイルシートの接続）。
内部（インライン）スタイル（属性スタイル）。

2番目のアプローチには多くの欠点があります。

たとえば、画面の幅の変化に対応したり、モバイルデバイスとデスクトップを区別したりするためにメディアクエリを使用できない。
hover ,: active、:: placeholder ,: before ,: afterなどのような疑似クラスおよび疑似要素を使用できない。
マークアップサイズの大幅な増加とパフォーマンスの低下。サーバーレンダリングの場合、トラフィックチャネルの負荷だけでなく、ユーザーによるページの読み込み時間も増加します。
より複雑なセレクターのスタイルを再定義できない。したがって、異なるブラウザーの表示を同じ形式に戻すことができない（reset.css、normalize.cssなど）

これらの欠点のいくつかは、すべてではありませんが、2番目のアプローチを1番目のアプローチと組み合わせることで補うことができます。

Facebookのポリシーについて

React開発会社としてのFacebookは、上記の欠点にもかかわらず、 Inline Stylesの使用を促進していることが知られています。彼らは理解できる、彼らはReact Nativeで統一されたアプローチを提供しようと努力している。なぜなら、そこにはインラインスタイルしかないからだ。しかし、Facebook自体はWeb用のReactコンポーネントをスタイリングする上で賢明なものを何も提供していないため、これは私たちにとって簡単ではありません。しかし、彼らの自転車を書いた多くの愛好家がいました。次に、最も人気のあるものを見て、Reactコンポーネントのスタイリングの基本的なアプローチを扱います。

インラインスタイルを使用しないReactコンポーネントのスタイル設定のアプローチの進化

スタイル付きの外部ファイルを1つ作成し、それをインクルードし、React-componentsでclassNameを使用して、このファイルのクラス名を使用します。
すべては前の段落とまったく同じですが、コンポーネントに応じてスタイルを多くのファイルに分割します。次に、ツールを使用してすべてのファイルを1つに収集し、接続します。名前の衝突を避けるために、たとえばBEMを使用します。

 /* Button.js */ import React, { Component } from 'react'; export default class Button extends Component { render() { return ( <div className = {'button ' + (this.props.isRed ? 'button--red' : '')}> <div className = 'button__caption'> {this.props.caption} </div> </div> ); } }

 /* Button.css */ .button { line-height: 32px; border: 1px solid #000; } .button__caption { text-decoration: underline; text-align: center; } .button--red { background-color: red; }

モジュール性のアイデアを開発し、 CSS-Modulesの使用に進むことができます。

 /* ScopedSelectors.js */ import styles from './ScopedSelectors.css'; import React, { Component } from 'react'; export default class ScopedSelectors extends Component { render() { return ( <div className = {styles.root}> <p className = {styles.text}> Scoped Selectors </p> </div> ); } };

 /* ScopedSelectors.css */ .root { border-width: 2px; border-style: solid; border-color: #777; padding: 0 20px; margin: 0 6px; max-width: 400px; } .text { color: #777; font-size: 24px; font-family: helvetica, arial, sans-serif; font-weight: 600; }

CSSモジュールを使用すると、スタイル名はローカルでのみ使用可能になります。各Reactコンポーネントは独自のルートスタイルを持つことができ、衝突はありません-スタイル名はアセンブリ中に変換されます。また、どこでも使用できるグローバルスタイルを定義することもできます-それらの名前は変換されません。 Node.jsからCSSモジュールをサポートするには、 css-modules-require-hookプロジェクトがあります。または、Webpackを使用して、アプリケーションのサーバーコードをコンパイルできます（サーバーコードのコンパイルに関する記事-1、2）。

これらすべてのアプローチについて、 autoprefixerと、あらゆる種類のless 、 sass 、 postcss 、定数付きスタイラス、インポート、ミックスイン、およびその他の便利な機能を簡単に追加できます。 IDEの構文の強調表示とツールチップにも問題はありません。このリスト内で、あるアプローチから別のアプローチに簡単に切り替えることができます。

インラインスタイルに基づくReactコンポーネントのスタイル設定

これには多くの解決策があり、それらは非常に異なっており、使用するための唯一の可能なオプションを課し、すべての結果をもたらします：他のものへの移行の難しさ、独自の特別な構文、デコレータ、継承する必要がある魔法のクラス-新しいフレームワークを学ぶ必要がありますそれを使用します。多くのソリューションは、サーバーレンダリングでは機能しないか、コンパイル段階で機能するはずの自動プレフィックスをサポートしません。ブラウザーにドラッグしないでください。

このアプローチの最も有名な代表者のいくつかを考えてみましょう：

ラジウム

メディアクエリと擬似クラスをサポートする優れたプロジェクト。たとえば、ホバー。次の構文を提供します。

 const styles = { button: { padding: '1em', ':hover': { border: '1px solid black' }, '@media (max-width: 200px)': { width: '100%', ':hover': { background: 'white', } } }, primary: { background: 'green' }, warning: { background: 'yellow' }, }; ... <button style={[styles.button, styles.primary]}> Confirm </button>

これが機能するには、コンポーネントを宣言するときにRadiumデコレータを使用する必要があります。

反応スタイル

Reactの標準のインラインスタイルと同じ構文を使用しますが、わずかに高度な機能を備えています。

 import StyleSheet from 'react-style'; const styles = StyleSheet.create({ primary: { background: 'green' }, warning: { background: 'yellow' }, button: { padding: '1em' }, // media queries '@media (max-width: 200px)': { button: { width: '100%' } } }); ... <button styles={[styles.button, styles.primary]}> Confirm </button>

Radiumと同様に、メディアクエリは機能しますが、それとは異なり、CSSによる擬似クラスとアニメーションはサポートされていません。Webpackのローダーがあります。

Jss

自動プレフィックス、擬似クラス、およびメディアクエリをサポートします。 react-jssを介してReactで使用できます。 Webpack用の実験的なjss-loaderもあります。使用例：

 import classNames from 'classnames'; import useSheet from 'react-jss'; const styles = { button: { padding: '1em' }, 'media (max-width: 200px)': { button: { width: '100%' } }, primary: { background: 'green' }, warning: { background: 'yellow' } }; @useSheet(styles) export default class ConfirmButton extends React.Component { render() { const {classes} = this.props.sheet; return <button className={classNames(classes.button, classes.primary)}> Confirm </button>; } }

jsxstyle

このプロジェクトは魔法の構文を導入し、メディアクエリをサポートしていませんが、Webpackのローダーがあります。

 // PrimaryButton component <button padding='1em' background='green' >Confirm</button>

これらのすべての技術の良い英語のレビューがあります。

おわりに

どのソリューションが他のソリューションより優れているかを明確に言うことは不可能です。すべてのソリューションは特定のタスクと制限に依存します。 CSSモジュールはプロジェクトによってはより適切であり、クラスのBEM名は別のプロジェクトで十分であり、3つ目はインラインスタイルのアイデアに基づいたものです。

Reactコンポーネントのスタイリングのアプローチの選択は、プロジェクト全体のコードにマークを残し、その開発ツールを大きく決定し、コードサポートとアプリケーション全体の速度に関連する他の多くの要因に影響を与える、重大なアーキテクチャ上の決定です。このレビューが、Reactコンポーネントのスタイリングのさまざまなアプローチに関する簡単なリファレンスとしてWeb開発者に役立ち、独自のパスを選択する際のリスクの評価に役立つことを願っています。

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