Comment écrire du CSS en réaction

Comment écrire du CSS dans React : 1. Ajoutez du style à l'élément DOM du nom de classe via className ; 2. Ajoutez directement l'attribut de style à l'élément DOM correspondant 3. En définissant des variables globales pour définir un ; style css.

L'environnement d'exploitation de cet article : système Windows7, version React17.0.1&&css3, ordinateur Dell G3.

Comment écrire en style CSS en React ?

Dans la syntaxe de base de JSX, il existe trois méthodes principales pour écrire des styles CSS dans React

1 Basé sur la classe -- (className)

Basé sur className, via className dans Ajouter du style à l'élément DOM du nom de classe dans le style

<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. Basé sur le CSS interne (la méthode préconisée par Facebook) Style interline (json)

Facebook prône le style interline, ajoutez directement l'attribut style à l'élément DOM correspondant, suivez les règles de réaction et écrivez-le dans { }.

<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. Chaîne de prototypes et variables globales

Vous pouvez définir un style CSS en définissant des variables globales, et les éléments DOM qui appliquent ce style peuvent être appelés directement.

Vous devez faire attention à l'emplacement d'ajout de styles dans la chaîne de prototypes Lors de l'appel, transmettez ceci, cela pointe vers le composant

<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;))

Ci-dessus sont trois façons d'écrire des styles CSS dans. réagir. Y a-t-il quelque chose qui manque ou qui est incorrect ? Toutes les corrections sont les bienvenues.

Recommandé : "

Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!