react里面写css的方法:1、通过className在style中给该class名的DOM元素添加样式;2、直接给对应的DOM元素添加style属性;3、通过定义全局变量的方法来定义一个css样式。
本文操作环境:windows7系统、react17.0.1&&css3版本、Dell G3电脑。
react里面怎么写css样式?
JSX基本语法中关于react如何写css样式主要有三种方法
1、基于class --(className)
基于className ,通过className在style中给该class名的DOM元素添加样式
<style> .title{ color:blue; } </style> <div id='app'></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为'app'的真实DOM之间 ReactDOM.render(<App/>,document.getElementById('app'))
2、基于inner css (facebook 主张的方式) 行间样式(json)
Facebook主张的是行间样式,直接给对应的DOM元素添加style属性,遵循react的规则,写在{ }当中。
<div id='app'></div> class App extends React.Component{ constructor(props){ super(peops) } render(){ return( <div style={{color:'red'}}>hello 行间样式</div> ) } } //将虚拟DOM以组件标签的形式渲染到id为'app'的真实DOM之间 ReactDOM.render(<App/>,document.getElementById('app'))
3、原型链和全局变量
可以通过定义全局变量的方法来定义一个css样式,适用该样式的DOM元素可直接调用。
原型链中需要注意添加样式的位置,调用时通过this,this指向该组件
<div id='app'></div> //全局样式方法 var color={color:'red'} 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为'app'的真实DOM之间 ReactDOM.render(<App/>,document.getElementById('app'))
以上是react中写css样式的三种方式,有什么遗漏或者不正确的地方欢迎大家指正。
推荐:《react视频教程》
以上是react里面怎么写css的详细内容。更多信息请关注PHP中文网其他相关文章!