React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解（转载）

因为最近工做须要，开始研究react，彻底新人一个，看到网上好多文章，眼花缭乱，更多的是给我入门的帮助，也尝试写了一些简单的demo。

1. 使用className设置样式(CSS的其余选择器也是同理)

• 定义一个CSS文件style.css,和普通CSS同样定义class选择器

.sty1{//和普通CSS同样定义class选择器  
        background-color: red;  
        color: white;  
        font-size: 40px;  
    }  
复制代码

• 在JSX中导入编写好的CSS文件

import './style.css';  
复制代码

• JSX的调用

<div className="sty1">看背景颜色和文字颜色</div> 
复制代码

说明：id选择器也是同理,因为React使用ES6编写代码,而ES6又有class的概念,因此为了避免混淆class选择器在React中写成了className
可能你在看别人的代码的时候可能看到如下代码,这个是经过CSS Modules的写法

• 定义一个CSS文件styleother.css,和普通CSS同样定义class选择器

.sty2{//和普通CSS同样定义class选择器  
        background-color: red;  
        color: white;  
        font-size: 40px;  
    }  
复制代码

• 在JSX中导入编写好的CSS文件

import StyleOther from  './styleother.css';
复制代码

• JSX的调用

<div className={StyleOther.sty2}>看背景颜色和文字颜色</div>
复制代码

说明：使用这种方式也是能够的,只是你须要修改你的webpack的config文件,将loader: "style!css"修改成loader: "style!css?modules",在css后面加一个modules,不过这两种方式是不能同时存在的,由于加了modules

2. 使用React的行内样式样式设置样式

• 在JSX文件中定义样式变量,和定义普通的对象变量同样

let backAndTextColor = {  
        backgroundColor:'red',  
        color:'white',  
        fontSize:40  
    };  
复制代码

• JSX的调用

<div style={backAndTextColor}>看背景颜色和文字颜色</div>  
复制代码

固然你也能够不定义一个变量,直接写到JSX中,以下代码所示:

<div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景颜色和文字颜色</div>
复制代码

分析：style={},这里的{}里面放的是对象,无论你是定义一个对象而后使用,仍是直接在里面写对象都是能够的,甚至能够写成下面的样子

style={this.getInputStyles()}  
    getInputStyles方法根据不一样的状态返回不一样的样式  
    getInputStyles() {  
        let styleObj;  
        if (this.state.focused == true) {  
            styleObj = {outlineStyle: 'none'};  
        }  
        return styleObj;  
    }  
复制代码

3. React行内样式扩展 在 React 中，行内样式并非以字符串的形式出现，而是经过一个特定的样式对象来指定。在这个对象中，key 值是用驼峰形式表示的样式名，而其对应的值则是样式值，一般来讲这个值是个字符串,若是是数字就不是字符串,不须要引号。

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

另外浏览器前缀除了ms之外首字母应该大写,因此这里的WebkitTransition的W是大写的。 当为内联样式指定一个像素值得时候， React 会在你的数字后面自动加上 "px" , 因此下面这样的写法是有效的：

let backAndTextColor = {  
        backgroundColor:'red',  
        color:'white',  
        fontSize:40  
    };  
复制代码

注释技巧：在React里注释不能用HTML的方式，那是木有用的。也不能直接用js的注释，那也是不行的。而是用大括号括起来，以后用/**/来注释,看起来是这样的

{/* 这是一个注释 */}
复制代码

总结：经过看这篇文章能让我更多的了解React的CSS写法，此篇转载文章也会做为我我的的一个知识点备份

原文地址：React普通样式(className)和行内样式(LineStyle)多种设置样式设置详解