react行内样式

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,064评论 1 4
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,584评论 1 19
  • 【Day 8】精句跟读 【Day 8】直播课:陈晓佳&Daniel—— 带你了解 Salary Negotiation
    法拉赫的猫阅读 205评论 0 0
  • 这名高手属奇才, 小试牛刀上擂台。 日里长歌谁敢比? 子时熬夜独徘徊。 注:系藏头诗。(平水韵)
    艾思阅读 325评论 26 14