由于最近工作需要，開(kāi)始研究react涩澡，完全新人一個(gè)，看到網(wǎng)上好多文章坠敷，眼花繚亂妙同，更多的是給我入門(mén)的幫助，也嘗試寫(xiě)了一些簡(jiǎn)單的demo膝迎。
1. 使用className設(shè)置樣式(CSS的其他選擇器也是同理)
- 定義一個(gè)CSS文件style.css,和普通CSS一樣定義class選擇器
.sty1{//和普通CSS一樣定義class選擇器
background-color: red;
color: white;
font-size: 40px;
}
- 在JSX中導(dǎo)入編寫(xiě)好的CSS文件
import './style.css';
- JSX的調(diào)用
<div className="sty1">看背景顏色和文字顏色</div>
說(shuō)明：id選擇器也是同理,由于React使用ES6編寫(xiě)代碼,而ES6又有class的概念,所以為了不混淆class選擇器在React中寫(xiě)成了className
可能你在看別人的代碼的時(shí)候可能看到以下代碼,這個(gè)是通過(guò)CSS Modules的寫(xiě)法
- 定義一個(gè)CSS文件styleother.css,和普通CSS一樣定義class選擇器
.sty2{//和普通CSS一樣定義class選擇器
background-color: red;
color: white;
font-size: 40px;
}
- 在JSX中導(dǎo)入編寫(xiě)好的CSS文件
import StyleOther from './styleother.css';
- JSX的調(diào)用
<div className={StyleOther.sty2}>看背景顏色和文字顏色</div>
說(shuō)明：使用這種方式也是可以的,只是你需要修改你的webpack的config文件,將loader: "style!css"修改為loader: "style!css?modules",在css后面加一個(gè)modules,不過(guò)這兩種方式是不能同時(shí)存在的,因?yàn)榧恿薽odules
2. 使用React的行內(nèi)樣式樣式設(shè)置樣式
- 在JSX文件中定義樣式變量,和定義普通的對(duì)象變量一樣
let backAndTextColor = {
backgroundColor:'red',
color:'white',
fontSize:40
};
- JSX的調(diào)用
<div style={backAndTextColor}>看背景顏色和文字顏色</div>
當(dāng)然你也可以不定義一個(gè)變量,直接寫(xiě)到JSX中,如下代碼所示:
<div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景顏色和文字顏色</div>
分析：style={},這里的{}里面放的是對(duì)象,不管你是定義一個(gè)對(duì)象然后使用,還是直接在里面寫(xiě)對(duì)象都是可以的,甚至可以寫(xiě)成下面的樣子
style={this.getInputStyles()}
getInputStyles方法根據(jù)不同的狀態(tài)返回不同的樣式
getInputStyles() {
let styleObj;
if (this.state.focused == true) {
styleObj = {outlineStyle: 'none'};
}
return styleObj;
}
3. React行內(nèi)樣式擴(kuò)展
在 React 中粥帚，行內(nèi)樣式并不是以字符串的形式出現(xiàn)，而是通過(guò)一個(gè)特定的樣式對(duì)象來(lái)指定限次。在這個(gè)對(duì)象中芒涡，key 值是用駝峰形式表示的樣式名，而其對(duì)應(yīng)的值則是樣式值卖漫，通常來(lái)說(shuō)這個(gè)值是個(gè)字符串,如果是數(shù)字就不是字符串,不需要引號(hào)费尽。
var divStyle = {
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // 注意這里的首字母'W'是大寫(xiě)
msTransition: 'all' // 'ms'是唯一一個(gè)首字母需要小寫(xiě)的瀏覽器前綴
};
另外瀏覽器前綴除了ms以外首字母應(yīng)該大寫(xiě),所以這里的WebkitTransition的W是大寫(xiě)的。
當(dāng)為內(nèi)聯(lián)樣式指定一個(gè)像素值得時(shí)候羊始， React 會(huì)在你的數(shù)字后面自動(dòng)加上 "px" , 所以下面這樣的寫(xiě)法是有效的：
let backAndTextColor = {
backgroundColor:'red',
color:'white',
fontSize:40
};
注釋技巧：在React里注釋不能用HTML的方式旱幼，那是木有用的。也不能直接用js的注釋突委，那也是不行的柏卤。而是用大括號(hào)括起來(lái)，之后用/**/來(lái)注釋,看起來(lái)是這樣的
{/* 這是一個(gè)注釋 */}
總結(jié)：通過(guò)看這篇文章能讓我更多的了解React的CSS寫(xiě)法匀油，此篇轉(zhuǎn)載文章也會(huì)作為我個(gè)人的一個(gè)知識(shí)點(diǎn)備份
原文地址：React普通樣式(className)和行內(nèi)樣式(LineStyle)多種設(shè)置樣式設(shè)置詳解
