ReactでのCSSの書き方

react での CSS の書き方: 1. className を通じてクラス名の DOM 要素にスタイルを追加します; 2. 対応する DOM 要素に style 属性を直接追加します; 3. グローバル変数を定義して、 css スタイル。

#この記事の動作環境: Windows7 システム、react17.0.1&&css3 バージョン、Dell G3 コンピューター。

React で CSS スタイルを記述するにはどうすればよいですか? #JSX の基本構文では、react で CSS スタイルを記述する方法として 3 つの主な方法があります

1. クラスに基づいて -- (className)

className を元に、In style の className を通して、クラス名の DOM 要素にスタイルを追加します

<style>
.title{
    color:blue;
}
</style>
<div id=&#39;app&#39;></div>
//创建一个叫App类，继承（extends)了react中创建组件的方法(component)
class App extends React.Component{
    constructor(props){  
        super(peops)
    }
    render(){   //类里面负责构建HTML的位置，render渲染
        return(  //返回HTML结构
        <div  className="title">高版本</div>
        
        )
    }
}
//将虚拟DOM以组件标签的形式渲染到id为&#39;app&#39;的真实DOM之间
ReactDOM.render(<App/>,document.getElementById(&#39;app&#39;))

2. インナー CSS (Facebook が提唱する方法) を元にインターライン スタイル (json)

Facebook が提唱しているのは interline スタイルで、対応する DOM 要素に直接 style 属性を追加し、react のルールに従い、{ } 内に記述します。

<div id=&#39;app&#39;></div>
class App extends React.Component{
    constructor(props){  
        super(peops)
    }
    render(){   
        return( 
    
         <div style={{color:&#39;red&#39;}}>hello 行间样式</div>
   
        )
    }
}
//将虚拟DOM以组件标签的形式渲染到id为&#39;app&#39;的真实DOM之间
ReactDOM.render(<App/>,document.getElementById(&#39;app&#39;))

3. プロトタイプ チェーンとグローバル変数

グローバル変数を定義することで CSS スタイルを定義でき、このスタイルに適用される DOM 要素を直接呼び出すことができます。

プロトタイプ チェーンでスタイルを追加する場所に注意する必要があります。呼び出すときは、これを渡し、コンポーネントを指します。

<div id=&#39;app&#39;></div>
//全局样式方法
var color={color:&#39;red&#39;}
class App extends React.Component{
    constructor(props){  
        super(peops)
    }
    render(){   
        return( 
         <div style={color}>react全局行间样式</div>
         //this 指向组件本身
         <div style={this.col}>原型样式</div>
        )
    }
}
//原型链样式的写法，在创建完以及渲染中间的位置添加原型上的样式
App.prototype.col={
    color:pink  
}
//将虚拟DOM以组件标签的形式渲染到id为&#39;app&#39;的真实DOM之间
ReactDOM.render(<App/>,document.getElementById(&#39;app&#39;))

上記は、CSS スタイルを記述する 3 つの方法です。不足しているものや間違っているものはありますか? 修正は大歓迎です。

推奨: 「

react ビデオ チュートリアル

」

以上がReactでのCSSの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。