JSX設置CSS樣式詳解

JSX設置CSS樣式詳解

1. 使用className設置樣式(CSS的其他選擇器也是同理)

(1)定義一個CSS文件style.css,和普通CSS一樣定義class選擇器

.sty1{//和普通CSS一樣定義class選擇器
    background-color: red;
    color: white;
    font-size: 40px;
}

(2)在JSX中導入編寫好的CSS文件

import ‘./style.css’;

(3)JSX的調用

看背景顏色和文字顏色

說明:id選擇器也是同理,由於React使用ES6編寫代碼,而ES6又有class的概念,所以為了不混淆class選擇器在React中寫成了className
可能你在看別人的代碼的時候可能看到以下代碼,這個是通過CSS Modules的寫法
(1)定義一個CSS文件styleother.css,和普通CSS一樣定義class選擇器

    .sty2{ background-color: red; color: white; font-size: 40px; }

(2)在JSX中導入編寫好的CSS文件

import StyleOther from  './styleother.css';

(3)JSX的調用

<div className={StyleOther.sty2}>看背景顏色和文字顏色</div>

說明:使用這種方式也是可以的,只是你需要修改你的webpack的config文件,將loader: “style!css”修改為loader: “style!css?modules”,在css后面加一個modules,不過這兩種方式是不能同時存在的,因為加了modules,
詳細資料:點擊打開鏈接

2. 使用React的行內樣式樣式設置樣式

(1)在JSX文件中定義樣式變量,和定義普通的對象變量一樣

    let backAndTextColor = {
        backgroundColor:'red',
        color:'white',
        fontSize:40
    };

(2)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. JSX行內樣式擴展

在 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
    };

有時候你的確需要保持你的CSS屬性的獨立性。下面是不會自動加 “px” 后綴的 css 屬性列表：

columnCount
fillOpacity
flex
flexGrow
flexShrink
fontWeight
lineClamp
lineHeight
opacity
order
orphans
strokeOpacity
widows
zIndex
zoom