React.jsインラインスタイルのベストプラクティス

次のように、Reactクラス内でスタイルを指定できることを知っています。

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

この方法ですべてのスタイリングを行うことを目指していて、CSSファイルでスタイルがまったく指定されていない必要がありますか？

または、インラインスタイルを完全に回避する必要がありますか？

両方を少し行うのは奇妙で面倒です。スタイリングを微調整するときに2つの場所を確認する必要があります。

「ベストプラクティス」はまだ多くありません。Reactコンポーネントにインラインスタイルを使用している私たちは、まだ非常に多くの実験を行っています。

大きく異なるアプローチは多数あります。Reactインラインスタイルのlib比較表

全部かゼロか？

私たちが「スタイル」と呼ぶものには、実際にはかなりの数の概念が含まれています。

• レイアウト— 他の要素との関係で要素/コンポーネントがどのように見えるか
• 外観— 要素/コンポーネントの特性
• 動作と状態— 要素/コンポーネントが特定の状態でどのように見えるか

状態スタイルから始める

Reactはすでにコンポーネントの状態を管理しています。これにより、状態と動作のスタイルがコンポーネントロジックとのコロケーションに自然に適合します。

条件付きの状態クラスでレンダリングするコンポーネントを構築する代わりに、状態スタイルを直接追加することを検討してください：

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

外観のスタイルを設定するためにクラスを使用しているが.is-、状態と動作には接頭辞付きのクラスを使用していないことに注意してください。

Object.assign（ES6）または_.extend（アンダースコア/ロダッシュ）を使用して、複数の状態のサポートを追加できます。

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

カスタマイズと再利用性

これでObject.assign、コンポーネントをさまざまなスタイルで再利用できるようにすることが非常に簡単になりました。デフォルトのスタイルを上書きしたい場合は、call-siteで次のようにpropsを使用して上書きできます<TodoItem dueStyle={ fontWeight: "bold" } />。このように実装されています：

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

レイアウト

個人的には、インラインレイアウトスタイルに説得力のある理由はありません。優れたCSSレイアウトシステムは数多くあります。1つだけ使用します。

ただし、コンポーネントに直接レイアウトスタイルを追加しないでください。コンポーネントをレイアウトコンポーネントでラップします。ここに例があります。

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

レイアウトをサポートするために、私はしばしばコンポーネントをとに設計しよう100% widthとしheightます。

外観

これは、「インラインスタイル」の議論の中で最も論争の的となっている領域です。最終的には、設計するコンポーネントとJavaScriptを使用したチームの快適さ次第です。

確かなことが1つあります。図書館の支援が必要です。ブラウザの状態（:hover、:focus）、およびメディアクエリは、未加工のReactでは苦痛です。

これらのハードパーツの構文はSASSの構文をモデル化するように設計されているため、私はラジウムが好きです。

コード編成

多くの場合、モジュールの外側にスタイルオブジェクトが表示されます。todo-listコンポーネントの場合、次のようになります。

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

ゲッター関数

テンプレートに一連のスタイルロジックを追加すると、少し面倒になる場合があります（上記を参照）。スタイルを計算するゲッター関数を作成したい：

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

さらに見る

これらすべてについては、今年初めにReact Europeで詳しく説明しました。インラインスタイルと、「CSSを使用する」のが最適な時期です。

途中で新しい発見がありましたら、喜んでお手伝いさせていただきます:)ヒットアップ-> @chantastic

Reactのスタイル属性は、値がオブジェクト、つまりキーと値のペアであることを期待しています。

style = {}{float:'right'}それを動作させるように内部に別のオブジェクトがあります。

<span style={{float:'right'}}>{'Download Audit'}</span>

これで問題が解決することを願っています

私はReactコンポーネント内でインラインスタイルを幅広く使用しています。コンポーネント内にスタイルを配置する方がはるかに明確であることがわかります。これは、コンポーネントが持つスタイルと持たないスタイルが常に明確だからです。さらに、Javascriptの全機能を手に入れることで、より複雑なスタイリングのニーズを本当に簡素化できます。

私は最初は確信が持てませんでしたが、数か月間試してみた後、完全に変換され、すべてのCSSをインラインまたは他のJS駆動のcssメソッドに変換しています。

Facebookの従業員とReactの寄稿者 "vjeux"によるこのプレゼンテーションも非常に役に立ちます— https://speakerdeck.com/vjeux/react-css-in-js

style属性の主な目的は、動的な状態ベースのスタイルです。たとえば、ある状態に基づいて進行状況バーに幅スタイルを設定したり、何かに基づいて位置や可視性を設定したりできます。

JSのスタイルには、アプリケーションが再利用可能なコンポーネントのカスタムスタイルを提供できないという制限があります。これは、前述の状況では完全に許容できますが、可視特性、特に色を変更する場合は許容できません。

James K Nelsonは、「JavaScriptでReactコンポーネントのスタイルを設定すべきではない理由」という書簡で、実際に欠点を伴うインラインスタイルを使用する必要はないと述べています。彼の声明は、より少ない/ scssで古い退屈なCSSが最良の解決策であるということです。CSSに賛成する彼の論文の一部：

• 外部から拡張可能
• 活用可能（インラインスタイルがすべてを乗り越える）
• デザイナーフレンドリー

JSXでのスタイリングは、HTMLでのスタイリングとよく似ています。

HTMLケース：

div style = "background-color：red; color：white"

JSXケース：

div style = {{backgroundColor： 'red'、color： 'white'}}

私が行うことは、再利用可能なコンポーネントのそれぞれに一意のカスタム要素名を付けてから、そのコンポーネントのCSSファイルを作成します。具体的には、そのコンポーネント（およびそのコンポーネントのみ）のすべてのスタイルオプションを指定します。

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

また、ファイル「custom-component.css」では、すべてのエントリがcustom-componentタグで始まります。

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

つまり、懸念の分離という重要な概念を失うことはありません。ビューとスタイル。コンポーネントを共有すると、他のユーザーが他のWebページに合わせてテーマを設定するのが簡単になります。

それは本当にあなたのアプリケーションの大きさに依存します、あなたがwebpackのようなバンドラーを使いたいならやCSSとJSを一緒にバンドルしたい場合や、アプリケーションフローをどのます。1日の終わりに、状況に応じて、決定を下すことができます。

大きなプロジェクトでファイルを整理するための私の好みは、CSSファイルとJSファイルを分離することです。共有が簡単で、UIの人々がCSSファイルを通過するだけで簡単になり、アプリケーション全体でファイルを整理するのも簡単です。

常にこのように考え、開発フェーズでは、すべてが適切な名前になり、他の開発者が簡単に見つけられるようにしてください...

たとえば、必要に応じてそれらを個別に混ぜます。たとえば、外部のcssを使用してみますが、必要に応じてReactもスタイルを受け入れ、以下のようなキー値を持つオブジェクトとして渡す必要があります。

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

JSX構文でのブールベースのスタイルは次のとおりです。

style={{display: this.state.isShowing ? "inherit" : "none"}}

通常、各Reactコンポーネントに関連付けられたscssファイルがあります。しかし、ロジックでコンポーネントをカプセル化して調べない理由はわかりません。つまり、Webコンポーネントについても同様のことが言えます。

構成に応じて、インラインスタイリングはホットリロードを提供します。Webページは、スタイルが変更されるたびにすぐに再レンダリングされます。これにより、コンポーネントをより迅速に開発できます。そうは言っても、CSS + SCSSのホットリロード環境をセットアップできると確信しています。

インラインスタイルを使用できますが、すべてのスタイリングで使用する場合、いくつかの制限があります。CSS疑似セレクターやメディアクエリをそこで使用できないことで知られている制限があります。

これを解決するためにラジウムを使用できますが、それでもプロジェクトが成長して面倒になると感じています。

CSSモジュールの使用をお勧めします。

CSSモジュールを使用すると、CSSファイルにCSSを自由に書き込むことができ、名前の衝突を心配する必要がありません。CSSモジュールによって処理されます。

この方法の利点は、特定のコンポーネントにスタイリング機能を提供することです。これにより、次の開発者がプロ​​ジェクトで作業できるように、保守性の高いコードと読みやすいプロジェクトアーキテクチャが作成されます。

一部のコンポーネントでは、インラインスタイルを使用する方が簡単です。また、（CSSではなくJavaScriptを使用しているため）コンポーネントスタイルをアニメーション化する方が簡単で簡潔です。

スタンドアロンコンポーネントの場合は、「スプレッドオペレーター」または「...」を使用します。私にとっては、それは明確で美しく、狭いスペースで動作します。以下は、その利点を示すために作成した小さな読み込みアニメーションです。

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

2019年11月の編集

業界（フォーチュン500企業）で働いているため、インラインスタイルを設定することはできません。私たちのチームでは、インラインスタイルは判読できず、保守もできないと判断しました。そして、インラインスタイルがアプリケーションのサポートを完全に許容できないようにする方法を直接見てきた後、私は同意する必要があります。インラインスタイルは完全におすすめしません。

インラインスタイルの問題は、コンテンツセキュリティポリシー（CSP）がより一般的になり、それを許可しないことです。したがって、インラインスタイルを完全に回避することをお勧めします。

更新： さらに説明すると、CSPはサーバーによって送信されるHTTPヘッダーであり、ページに表示できるコンテンツを制限します。これは、開発者がサイトのコーディングを不十分にしている場合に攻撃者がいたずらをしないようにするためにサーバーに適用できる単なる緩和策にすぎません。

これらの制限のほとんどの目的は、XSS（クロスサイトスクリプティング）攻撃を阻止することです。XSSは、攻撃者が自分のJavaScriptをページに含める方法を見つけ出す場所です（たとえば、ユーザー名を作成してbob<SCRIPT>alert("hello")</SCRIPT>コメントを投稿した場合、ページにアクセスしてもアラートは表示されません）。開発者は、ユーザーにこのようなコンテンツをサイトに追加する機能を拒否する必要がありますが、万が一間違えた場合に備えて、script>タグが見つかった場合、CSPはページのロードをブロックします。

CSPは、開発者が間違いを犯した場合に、攻撃者がそのサイトの訪問者に問題を引き起こさないようにするための追加の保護レベルです。

つまり、すべてXSSですが、攻撃者が<script>タグを含めることはできないが、タグを含めること<style>やstyle=、タグにパラメーターを含めることができる場合はどうでしょうか。そうすると、彼は、間違ったボタンをクリックするようにだまされたり、その他の問題が発生するような方法で、サイトの外観を変更できる可能性があります。これはそれほど心配する必要はありませんが、それでも避けるべきことであり、CSPがそれを行います。

CSPのサイトをテストするための適切なリソースは、https： //securityheaders.io/です。

CSPの詳細については、http：//www.html5rocks.com/en/tutorials/security/content-security-policy/を参照してください。

CSSファイルにスタイルを書き込む場合と比較すると、Reactのスタイル属性には次の利点があります。

1. ツールのjavascriptをプログラミング言語として使用する機能により、要素のスタイルを制御できます。これには、変数の埋め込み、条件の使用、スタイルの子コンポーネントへの受け渡しが含まれます。
2. 「コンポーネント」アプローチ。コンポーネント用に記述されたHTML、JS、CSSコードを分離する必要はもうありません。コンポーネントのコードが統合され、1つの場所で記述されています。

ただし、Reactのスタイル属性にはいくつかの欠点があります-できません

1. メディアクエリを使用できません
2. 疑似セレクターは使用できません。
3. CSSクラスに比べて効率が悪い。

JSでCSSを使用すると、スタイルタグのすべての利点を、それらの欠点なしに得ることができます。現在、js-librariesには、Emotion、Styled-Components、Radiumなど、よくサポートされている人気のあるCSSがいくつかあります。これらのライブラリーは、ReactがHTMLと同じようにCSSに対応しています。CSSを記述して、JSコードでCSSを制御することができます。

単純な要素のスタイリングのためにコードがどのように見えるかを比較してみましょう。「hello world」divのスタイルを設定して、デスクトップでは大きく、モバイルでは小さく表示されるようにします。

スタイル属性の使用

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

メディアタグはスタイルタグでは使用できないため、classNameを要素に追加し、CSSルールを追加する必要があります。

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Emotionの10 cssタグの使用

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emotionは、テンプレート文字列とスタイル付きコンポーネントもサポートしています。だからあなたが望むならあなたは書くことができます：

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

裏側では、「JSのCss」はcssクラスを使用します。特に感情はパフォーマンスを念頭に置いて構築され、キャッシングを使用します。Reactスタイル属性と比較して、JSのCssはより良いパフォーマンスを提供します。

ベストプラクティス

ここに私がお勧めするいくつかのベストプラクティスがあります：

1. 要素をインラインで、またはJSでスタイル設定する場合は、css-in-jsライブラリを使用します。style属性は使用しないでください。

この方法ですべてのスタイリングを行うことを目指していて、CSSファイルでスタイルがまったく指定されていない必要がありますか？

2. css-in-jsソリューションを使用する場合、Cssファイルにスタイルを記述する必要はありません。JSが提供するプログラミング言語のすべてのツールを使用できるので、JSでのCSSの記述は優れています。

インラインスタイルを完全に避けるべきですか？

3. JSでのスタイルコードの構造化は、一般的なコードの構造化と非常に似ています。例えば：
   • 繰り返されるスタイルを認識し、1つの場所に書きます。Emotionでこれを行うには2つの方法があります。

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• Reactコーディングパターンはカプセル化されたコンポーネントで構成されます-コンポーネントを制御するHTMLとJSは1つのファイルに記述されます。これは、そのコンポーネントをスタイルするcss / styleコードが属する場所です。

• 必要に応じて、コンポーネントにスタイリングプロップを追加します。このようにして、子コンポーネントで記述されたコードとスタイルを再利用し、親コンポーネントによって特定のニーズに合わせてカスタマイズできます。

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

StrCSSも使用できます。孤立したクラス名などが作成されます。コード例は次のようになります。（オプション）構文強調表示サポートのために、Visual Studio MarketplaceからVSCode拡張機能をインストールできます！

ソース：strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

時々、コンポーネントからいくつかの要素をスタイルする必要がありますが、そのコンポーネントのみを表示する必要がある場合、またはスタイルがそれより少ない場合は、CSSクラスを使用する代わりに、react jsのインラインスタイルを使用します。reactjsインラインスタイルはHTMLインラインスタイルと同じですが、プロパティ名は少し異なります。

style = {{prop： "value"}}を使用して、タグにスタイルを記述します

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

2020年の更新：ベストプラクティスは、このビデオで最初に受け入れられた回答（まだ関連性がある）で指摘されているように、切り替えを行ったときにチームを殺さないライブラリを使用することです。また、傾向を理解するために、これは非常に役立つチャートです。これについて自分で調査した後、私は新しいプロジェクトにEmotionを使用することを選択しました。これは非常に柔軟で拡張性があることが証明されています。

2015年に最も支持された回答がRadiumを推奨したことを考えると、Radiumは現在メンテナンスモードに追いやられています。したがって、選択肢のリストを追加することは理にかなっているようです。ポストラジウムを中止するには、いくつかのライブラリを示唆しています。リンクされている各サイトにはすぐに利用できる例があるため、ここにコードをコピーして貼り付けることは控えます。

• とりわけstyled-componentsから「インスピレーションを得た」感情は、jsでスタイルを使用し、フレームワークに依存しない場合がありますが、Reactライブラリを確実に宣伝します。この投稿の時点で、感情は最新に保たれています。
• styled-componentsは同等であり、Emotionと同じ機能の多くを提供します。また、積極的に維持されています。Emotionとstyled-componentsの構文はどちらも似ています。Reactコンポーネントと連携するように特別に構築されています。
• JSSフレームワークに依存しないjsのスタイルのさらに別のオプションですが、フレームワークパッケージは多数ありますが、その中にReact-JSSがあります。

とにかくインラインcssは推奨されません。JSSに基づくプロジェクトでは、styled-componentsを使用しました。コンポーネントに動的クラス名を追加することにより、CSSオーバーライドを保護します。渡された小道具に基づいてcss値を追加することもできます。