【日拱一卒】React基礎 五 CSS in React
這是我參與11月更文挑戰的第24天,活動詳情檢視:2021最後一次更文挑戰
前言
React基礎
行內樣式、引入樣式表、CSSmodule、CSS管理進階
行內樣式
<div style={{fontSize:18,color:red}}>Content Here</div>
這裡注意CSS屬性名使用駝峰命名的寫法就可以了
style的值在JSX中是一個物件 這個物件需要用{}包裹起來
引入樣式表
這個是比較常用的
listItem.css
.title{
font-size: 20px;
color: #710000;
}
listItem.jsx
import React, { Component } from 'react'
import './listItem.css'
//這樣listItem.css中的樣式就能使用了
class App extends Component {
render(){
<span className="title">標題</span>
}
}
引入樣式表的不足
這樣子寫的樣式最後被打包之後是全域性的,會造成樣式汙染,
為了解決這個問題,所以會引入即將介紹的CSSmodule
CSSmodule
CSSmodule不是react獨有的,而是前端工程化的一套解決方案
全域性汙染
將之前的listItem.css
檔案改名為listItem.module.css
listItem.module.css 檔案的內容不變
import React, { Component } from 'react'
import style from './listItem.module.css'
//這樣listItem.css中的樣式就能使用了
class App extends Component {
render(){
<span className={style.title}>標題</span>
}
}
會發現這裡的class多一個字尾,這個字尾就是唯一標識
複雜案例1
同一個.module.css檔案使用compose
listItem.module.css
.common{
text-decoration: underline;
text-indent: 2em;
}
.title{
composes: common;
font-size:20px;
color: #710000;
}
複雜案例2
不同.module.css檔案使用compose,import
common.module.css
.common {
text-decoration: underline;
text-indent: 2em;
}
listItem.module.css
.title {
composes: common from 'common.module.css'
font-size:20px;
color: #710000;
}
小結
解決全域性汙染、命名混亂、沒有依賴管理
- 不使用選擇器,使用class名定義樣式
- 不層疊class,使用一個class定義樣式
- 通過compose來組合
CSS管理進階
CSS管理工具
CSS類庫 通過JS賦能解決了CSS不具備的功能,變數、迴圈、函式等等
Styled-component
略
Classnames
安裝命令
npm install classnames --save
使用程式碼
// 引用classnames
import style from './listItem.module.css'
import classnames from 'classnames/bind'
import cn from 'classnames'
const cls = classnames.bind(style)
let count = 0
// cls更方便我們去寫多個class的樣式
const _cn = cn({'theme-grid-col-s':!count})
.... return
<span className={cls('title','list-title')}>{this.props.data.name}
<div className={`col-2 themed-grid-col` + _cn}>
...
舉了兩個Classnames例子,感受一下CSS類庫的力量
總結
React中的CSS。
- 因為是JSX,所以可以使用JS去寫行內樣式,
- 傳統的從css檔案引入樣式,會打包為全域性樣式,形成全域性樣式汙染
- 引入CSSmodule解決全域性樣式汙染
- CSS類庫,搬磚人一般用不上,如果公司有人用了,還是可以考慮的。可以在個人的專案中多+探索
PS:
React最為基礎的部分就到此結束了,基本沒有什麼很繞的理論,大概就是照著別人程式碼敲,完全不用理解。因為React就是這麼設計的,就是讓你這麼使用的。
接下來是React入門了,事件處理、state、生命週期、以及元件的設計模式。難度上來了,學就完事了。這裡就必須要理解清楚了,把那些易錯點和實際運用中的場景要結合起來。大概就是好玩的還在後頭呢,嘿嘿……
參考連結:
css module http://www.ruanyifeng.com/blog/2016/06/css_modules.html
在React中使用css預編譯 http://juejin.im/post/5c3d67066fb9a049f06a8323
styled component http://www.styled-components.com/