这篇文章将为大家详细讲解有关react里面写css的案例，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
react里面写css的方法：1、通过className在style中给该class名的DOM元素添加样式；2、直接给对应的DOM元素添加style属性；3、通过定义全局变量的方法来定义一个css样式。
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的案例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
