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中怎么写css样式?的更多相关文章
- Vue为v-html中标签添加CSS样式
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: <template> <div class="msgHtmlBox" v-ht ...
- 通过node.js读取html页面及其页面中引入的css样式
Node 是什么? Node 是一个基于Chrome V8 引擎的JavaScript 运行环境. Node 不是一种独立的语言.Node不是 JavaScript 框架, Node是一个除了浏览器之 ...
- react link引入外部css样式的坑
刚开始的代码是这样的,使用react router4.x写的demo路由跳转后,页面的没有渲染,是因为没有引入外部css文件(或者说引入外部文件路径错误) <!DOCTYPE html> ...
- vue.cli 中使用 less 来写css样式
vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...
- 在React中修改antd的样式
1.在Component的Radio中加个style={radioStyle}. <RadioGroup> <Radio style={radioStyle} value={}> ...
- 工作中积累整理-CSS样式表(一)
[layout] clear:该属性的值指出了不允许有浮动对象的边. 默认值:none none: 允许两边都可以有浮动对象 both: 不允许有浮动对象 left: 不允许左边有浮动对象 right ...
- Vuejs使用scoped(私有) style为v-html中标签添加CSS样式
最近使用Vue框架的时候遇到一个问题,就是后台把数据写好了,而且写好的数据的某些内容是html格式的,使用Vue框架的v-html虽然可以很简单的就把数据转换成html的标签渲染在页面上,但是有些样式 ...
- PHP内写css样式
<1>php的两种输出方式 1,echo: 2,print; 栗子: <?php echo:"你好,我的名字是LHH"; print:"你好,我的名字是 ...
- JavaScript中批量设置Css样式
设置 input 元素的 属性: document.getElementsByTagName("INPUT")[0].setAttribute("属性",&q ...
随机推荐
- 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 ...
- CSS三角形的实现原理及运用
原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...
- 处理输入为非对角阵的Clustering by fast search and find of density peak代码
Clustering by fast search and find of density peak. Alex Rodriguez, Alessandro Laio 是发表在Science上的一篇很 ...
- kubernetes发布tomcat服务,通过deployment,service布署(转)
1.制作tomcat镜像 参考docker tomcat镜像制作 此处直接拉取 查看已有可镜像 先设置docker阿里源,即添加 "registry-mirrors": [&quo ...
- Qt编写自定义控件15-百分比仪表盘
前言 百分比仪表盘,主要的应用场景是展示销售完成率.产品合格率等,也可以作为一个进度百分比展示,可以独立设置对应的标题文字,标题文字的颜色和整体的颜色都可以单独设置,建议设置成统一的风格,这样会显得更 ...
- java IO流的API
常用的IO流API有:[InputStream.OutputStream] [FileInputStream.FileOutputStream] [BufferedInputStream.Buffer ...
- openstack核心组件--glance镜像(2)
一.glance介绍: Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供Restful API可以查询虚 ...
- bashdb调试shell脚本
http://note.youdao.com/noteshare?id=ef705313b714cf3a17cfe17dc80956a3
- k8s 网络模型解析之原理
今天研究了一下k8s的网络模型,该解析基于flannel vxlan+ kubeproxy iptables 模式. 一.Docker 首先分析一下Docker层面的网络模型,我们知道容器是基于内核的 ...
- 架构模式: 客户端 UI 构建
架构模式: 客户端 UI 构建 上下文 您已应用微服务架构模式.服务由业务能力/面向子域的团队开发,这些团队也负责用户体验.一些UI屏幕/页面显示来自多个服务的数据.例如,考虑亚马逊风格的产品详细信息 ...