反応するCSSスタイルを追加する方法

追加方法: 1. "style={{style code}}" を使用してコンポーネント内で CSS スタイルを定義します; 2. 最初にスタイル スタイル オブジェクトを作成し、次に "style={{レンダー関数のコンポーネント Object}" ステートメント リファレンス; 3. "import 'css file path'" を使用して外部 CSS ファイルを導入します。

#このチュートリアルの動作環境: Windows7 システム、react16 バージョン、Dell G3 コンピューター。

関連チュートリアルの推奨事項:

React ビデオ チュートリアル

HTML で CSS を参照する 3 つの方法と比較すると、React にも 3 つの方法が 1 つずつあります。

1. インライン スタイル: コンポーネント内で直接定義

インライン スタイルは最も基本的な書き方で、HTML を初めて学んだときに書いたインライン スタイルに似ています。 JSX での

の使用はプロジェクトではあまり一般的ではないかもしれません:

class App extends React.Component {
  // ...
  render() {
    return (
      <div style={{ background: &#39;#eee&#39;, width: &#39;200px&#39;, height: &#39;200px&#39;}}>
        <p style= {{color:&#39;red&#39;, fontSize:&#39;40px&#39;}}>Second Way!</p>
      </div>
    )
  }
}

ここでの CSS スタイル名はキャメルケースの名前付けを使用していることに注意してください: font-size → fontSize など。 CSS プロパティを二重中括弧で囲む必要があります。なぜ 2 つの中括弧を使用するのでしょうか? JS 式は JSX でレンダリングされるため、中括弧のペアで囲む必要があります。{style} は JS オブジェクトとして扱うことができます。したがって、最初の中括弧のペアは JS 式を JSX 解析に組み込み、内部の中括弧のペアはスタイル オブジェクト インスタンスを作成するため、ここでスタイルはオブジェクトとしてコンポーネントに渡されます

#2. 宣言スタイル:

宣言スタイルは、実際にはインライン スタイルを記述する改良された方法です。render 関数の外でスタイル オブジェクトを作成し、それをコンポーネントに渡して CSS をラベルから分離しますが、実際にはスタイル

class App extends React.Component {
 
//...
 
 const style1={    
      background:'#eee',
      width:'200px',
      height:'200px'
    }
 
  const style2={    
      color:'red',
      fontSize:'40px'
    }
 
  render() {
    return (
      <div style={style1}>
        <p style= {style2}>Second Way!</p>
      </div>
    )
  }
}

ここでの実際の命名方法は依然としてキャメルケースであることに注意してください。第二に、スタイル オブジェクトは外部で宣言されているため、次の場合に必要な中括弧は 1 つだけです。 JSX で使用する {//.. }

3. スタイルを導入します:

外部 CSS ファイルを導入します。外部 CSS ファイルは通常の CSS です。次のステートメントをインポート ステートメントの後に使用します。コンポーネントjs。 スタイルの導入とは、CSS ファイルを外部で作成し、それをインポートして使用することを意味します。この通常のインポートされたスタイルには、実際には特定の問題があります。最初に使用法を見てから、問題を分析しましょう。

使用方法:

css ファイル

.person{
    width: 60%;
    margin:16px auto;
    border: 1px solid #eee;
    box-shadow: 0 2px 3px #ccc;
    padding:16px;
    text-align: center;
}

js ファイル

import React from 'react';
import './Person.css';
class App extends React.Component {
 
  //....  
 
  render() {
 
    return (
      <div className=&#39;person&#39;>
        <p>person:Hello world</p>
      </div> 
    )
  }
}
 
export default App;

結果表示:

質問:

CSS ルールはグローバルであるため、どのコンポーネントのスタイル ルールもページ全体に有効であり、多数の競合が発生する可能性があります。つまり、2 つの CSS ファイルがあり、それらのスタイル名の一部が同じである場合、それらは上書きされます。簡単な解決策は、スタイルの名前を複雑で重複しないようにすることですが、この方法では、スタイルが多すぎるため、重複を避けるのが難しく、名前もあまり良くありません。

プログラミング関連の知識について詳しくは、

プログラミング教育

をご覧ください。 ！

以上が反応するCSSスタイルを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。