美文网首页
react行内样式

react行内样式

作者: LElysion | 来源:发表于2017-03-15 16:56 被阅读0次

react的行内样式本质上是一个对象,比如官方文档的这个

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // 注意这里的首字母'W'是大写
  msTransition: 'all' // 'ms'是唯一一个首字母需要小写的浏览器前缀
};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

如果打算直接写在标签上的话,更简单,不过就是看着比较多,用style={{}}就可以的

<div className="" 
                style={{marginBottom:"5px"}}
                value={ user.userName } 
                onChange={this.onTextChange('username').bind(this)}></div>

不过需要注意的是这个里面这个属性名需要使用小驼峰写法style={{marginButtom:"5px"}}
没法像css那样写margin-bottom:5px

相关文章

  • react行内样式

    react的行内样式本质上是一个对象,比如官方文档的这个 如果打算直接写在标签上的话,更简单,不过就是看着比较多,...

  • react 行内样式

    style={this.state.join_show ? "height:88vh" : ""} this.se...

  • React组件中的DOM样式

    React组件中的DOM样式 一、行内、class、模块化 二、根据不同的条件添加不同的样式 安装classnam...

  • 在react中设置css样式以及条件语句写法

    在react中设置css样式 以上是行内式的样式设置,渲染的结果是 当然还可以使用require直接引入.css文...

  • React普通样式(className)和行内样式(LineSt

    由于最近工作需要,开始研究react,完全新人一个,看到网上好多文章,眼花缭乱,更多的是给我入门的帮助,也尝试写了...

  • 12-CSS引入方式

    一、 行内样式表(行内式引入) 行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。...

  • css选择器优先级

    内联样式:行内样式 style=""外联样式:选择器 !important>行内样式>id(#)选择器>类选择器...

  • css层叠样式表

    三种书写方式 行内样式 内部样式 外部样式 任何一个网页元素都是矩形 行内样式 每一个元素都可以书写行内样式 st...

  • css基础1

    使用css的方式 使用css的方式有3种,样式的优先权为:行内样式>内部样式>外部样式行内样式内部样式外部样式 行...

  • CSS三:CSS的三种引入方式

    CSS的引入方式共有三种:行内样式、内部样式表、外部样式表。 #一、行内样式 使用style属性引入CSS样式。 ...

网友评论

      本文标题:react行内样式

      本文链接:https://www.haomeiwen.com/subject/istrnttx.html