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)多種設置樣式設置詳解