【日拱一卒】React基礎五 CSS in React_ZZHoliday

這是我參與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管理工具

Styled-component 傳送門
Classnames npm頁傳送門 github傳送門

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預編譯 https://juejin.im/post/5c3d67066fb9a049f06a8323

styled component https://www.styled-components.com/

【日拱一卒】React基礎 五 CSS in React

前言