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中怎么写css样式?的更多相关文章

  1. Vue为v-html中标签添加CSS样式

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: <template> <div class="msgHtmlBox" v-ht ...

  2. 通过node.js读取html页面及其页面中引入的css样式

    Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...

  3. react link引入外部css样式的坑

    刚开始的代码是这样的,使用react router4.x写的demo路由跳转后,页面的没有渲染,是因为没有引入外部css文件(或者说引入外部文件路径错误) <!DOCTYPE html> ...

  4. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

  5. 在React中修改antd的样式

    1.在Component的Radio中加个style={radioStyle}. <RadioGroup> <Radio style={radioStyle} value={}> ...

  6. 工作中积累整理-CSS样式表(一)

    [layout] clear:该属性的值指出了不允许有浮动对象的边. 默认值:none none: 允许两边都可以有浮动对象 both: 不允许有浮动对象 left: 不允许左边有浮动对象 right ...

  7. Vuejs使用scoped(私有) style为v-html中标签添加CSS样式

    最近使用Vue框架的时候遇到一个问题,就是后台把数据写好了,而且写好的数据的某些内容是html格式的,使用Vue框架的v-html虽然可以很简单的就把数据转换成html的标签渲染在页面上,但是有些样式 ...

  8. PHP内写css样式

    <1>php的两种输出方式 1,echo: 2,print; 栗子: <?php echo:"你好,我的名字是LHH"; print:"你好,我的名字是 ...

  9. JavaScript中批量设置Css样式

    设置 input 元素的  属性: document.getElementsByTagName("INPUT")[0].setAttribute("属性",&q ...

随机推荐

  1. LC 813. Largest Sum of Averages

    We partition a row of numbers A into at most K adjacent (non-empty) groups, then our score is the su ...

  2. CSS三角形的实现原理及运用

    原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...

  3. 处理输入为非对角阵的Clustering by fast search and find of density peak代码

    Clustering by fast search and find of density peak. Alex Rodriguez, Alessandro Laio 是发表在Science上的一篇很 ...

  4. kubernetes发布tomcat服务,通过deployment,service布署(转)

    1.制作tomcat镜像 参考docker tomcat镜像制作 此处直接拉取 查看已有可镜像 先设置docker阿里源,即添加 "registry-mirrors": [&quo ...

  5. Qt编写自定义控件15-百分比仪表盘

    前言 百分比仪表盘,主要的应用场景是展示销售完成率.产品合格率等,也可以作为一个进度百分比展示,可以独立设置对应的标题文字,标题文字的颜色和整体的颜色都可以单独设置,建议设置成统一的风格,这样会显得更 ...

  6. java IO流的API

    常用的IO流API有:[InputStream.OutputStream] [FileInputStream.FileOutputStream] [BufferedInputStream.Buffer ...

  7. openstack核心组件--glance镜像(2)

    一.glance介绍:              Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚 ...

  8. bashdb调试shell脚本

    http://note.youdao.com/noteshare?id=ef705313b714cf3a17cfe17dc80956a3

  9. k8s 网络模型解析之原理

    今天研究了一下k8s的网络模型,该解析基于flannel vxlan+ kubeproxy iptables 模式. 一.Docker 首先分析一下Docker层面的网络模型,我们知道容器是基于内核的 ...

  10. 架构模式: 客户端 UI 构建

    架构模式: 客户端 UI 构建 上下文 您已应用微服务架构模式.服务由业务能力/面向子域的团队开发,这些团队也负责用户体验.一些UI屏幕/页面显示来自多个服务的数据.例如,考虑亚马逊风格的产品详细信息 ...