Reactにおけるオブジェクトからのstyle属性へのデータ挿入

CSSスタイルは、 属性styleを使用して要素に追加することもできます。 このレッスンと次のいくつかのレッスンでは、 インラインスタイリングの方法を検討します。

今回は、ファイルstyles.cssを接続せず、 対応する値を各タグのスタイルのオブジェクトとして 属性styleに渡します。 これらはコンポーネントファイルに直接記述します。

それでは、前のレッスンで作成した、 CSSスタイルのないコンポーネントを取り上げます：

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

ファイルApp.js内の returnコマンドの前に、 変数class1にdivのCSSスタイルを持つオブジェクトを作成しましょう。 ここでのプロパティ名は キャメルケース 表記で記述され、 プロパティ値は引用符で囲む必要があることを覚えておいてください：

App.jsconst class1 = {
  width: '200px',
  border: '2px solid brown',
  padding: '10px',
  textAlign: 'center'
};

次に、最初の段落のスタイルを持つオブジェクトclass2を追加します：

App.jsconst class2 = {
  color: 'orangered',
  fontWeight: 'bold'
}

2番目の段落のスタイルを持つオブジェクトclass3：

App.jsconst class3 = {
  fontStyle: 'italic',
  color: 'brown',
}

そして最後に、最後の段落のためのclass4：

App.jsconst class4 = {
  backgroundColor: 'orange',
  fontWeight: 'bold',
  color: 'white',
}

次に、コンポーネントでCSSスタイルを適用するために、 属性styleを使用します。 最初の段落には変数class2がありました。 これを値として渡します：

App.js<p style={class2}>text</p>

同様に、残りのタグにもオブジェクトからのスタイルを追加します。

結果として、コンポーネントのコードは次のようになります：

App.jsfunction App() {
  const class1 = {
    width: '200px',
    border: '2px solid brown',
    padding: '10px',
    textAlign: 'center',
  };

  const class2 = {
    color: 'orangered',
    fontWeight: 'bold',
  };

  const class3 = {
    fontStyle: 'italic',
    color: 'brown',
  };

  const class4 = {
    backgroundColor: 'orange',
    fontWeight: 'bold',
    color: 'white',
  };

  return (
    <div style={class1}>
      <p style={class2}>text</p>
      <p style={class3}>text</p>
      <p style={class4}>text</p>
    </div>
  );
}