React中如何引入CSS呢
一、是什麼
元件式開發選擇合適的css解決方案尤為重要,通常會遵循以下規則:
- 可以編寫區域性css,不會隨意汙染其他元件內的原生;
- 可以編寫動態的css,可以獲取當前元件的一些狀態,根據狀態的變化生成不同的css樣式;
- 支援所有的css特性:偽類、動畫、媒體查詢等;
- 編寫起來簡潔方便、最好符合一貫的css風格特點。
在這一方面,vue使用css起來更為簡潔:
- 通過 style 標籤編寫樣式
- scoped 屬性決定編寫的樣式是否區域性有效
- lang 屬性設定前處理器
- 內聯樣式風格的方式來根據最新狀態設定和改變css
而在react中,引入CSS就不如Vue方便簡潔,其引入css的方式有很多種,各有利弊。
二、方式
常見的CSS引入方式有以下:
- 在元件內直接使用
- 元件中引入 .css 檔案
- 元件中引入 .module.css 檔案
- CSS in JS
在元件內直接使用
直接在元件中書寫css樣式,通過style屬性直接引入,如下:
import React, { Component } from "react"; const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //駝峰法 minHeight: "200px", boxSizing: "border-box" }; class Test extends Component { constructor(props, context) { super(props); } render() { return ( <div> <div style={div1}>123</div> <div style={{backgroundColor:"red"}}> </div> ); } } export default Test;
上面可以看到,css屬性需要轉換成駝峰寫法。
這種方式優點:
- 內聯樣式, 樣式之間不會有衝突
- 可以動態獲取當前state中的狀態
缺點:
- 寫法上都需要使用駝峰標識
- 某些樣式沒有提示
- 大量的樣式, 程式碼混亂
- 某些樣式無法編寫(比如偽類/偽元素)
元件中引入css檔案
將css單獨寫在一個css檔案中,然後在元件中直接引入。
App.css檔案:
.title { color: red; font-size: 20px; } .desc { color: green; text-decoration: underline; }
元件中引入:
import React, { PureComponent } from 'react'; import Home from './Home'; import './App.css'; export default class App extends PureComponent { render() { return ( <div className="app"> <h2 className="title">我是App的標題</h2> <p className="desc">我是App中的一段文字描述</p > <Home/> </div> ) } }
這種方式存在不好的地方在於樣式是全域性生效,樣式之間會互相影響。
元件中引入 .module.css 檔案
將css檔案作為一個模組引入,這個模組中的所有css,只作用於當前元件。不會影響當前元件的後代元件。
這種方式是webpack特工的方案,只需要配置webpack配置檔案中modules:true即可:
import React, { PureComponent } from 'react'; import Home from './Home'; import './App.module.css'; export default class App extends PureComponent { render() { return ( <div className="app"> <h2 className="title">我是App的標題</h2> <p className="desc">我是App中的一段文字描述</p > <Home/> </div> ) } }
這種方式能夠解決區域性作用域問題,但也有一定的缺陷:
- 引用的類名,不能使用連線符(.xxx-xx),在 JavaScript 中是不識別的
- 所有的 className 都必須使用 {style.className} 的形式來編寫
- 不方便動態來修改某些樣式,依然需要使用內聯樣式的方式;
CSS in JS
CSS-in-JS, 是指一種模式,其中CSS由 JavaScript生成而不是在外部檔案中定義
此功能並不是 React 的一部分,而是由第三方庫提供,例如:
styled-components
emotion
glamorous
下面主要看看styled-components的基本使用,本質是通過函式的呼叫,最終創建出一個元件:
- 這個元件會被自動新增上一個不重複的class
- styled-components會給該class新增相關的樣式
基本使用如下:
建立一個style.js檔案用於存放樣式元件:
export const SelfLink = styled.div` height: 50px; border: 1px solid red; color: yellow; `; export const SelfButton = styled.div` height: 150px; width: 150px; color: ${props => props.color}; background-image: url(${props => props.src}); background-size: 150px 150px; `;
引入樣式元件也很簡單:
import React, { Component } from "react"; import { SelfLink, SelfButton } from "./style"; class Test extends Component { constructor(props, context) { super(props); } render() { return ( <div> <SelfLink title="People's Republic of China">app.js</SelfLink> <SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}> SelfButton </SelfButton> </div> ); } } export default Test;
三、區別
通過上面四種樣式的引入,可以看到:
- 在元件內直接使用css該方式編寫方便,容易能夠根據狀態修改樣式屬性,但是大量的演示編寫容易導致程式碼混亂
- 元件中引入 .css 檔案符合我們日常的編寫習慣,但是作用域是全域性的,樣式之間會層疊
- 引入.module.css 檔案能夠解決區域性作用域問題,但是不方便動態修改樣式,需要使用內聯的方式進行樣式的編寫
- 通過css in js 這種方法,可以滿足大部分場景的應用,可以類似於前處理器一樣樣式巢狀、定義、修改狀態等
至於使用react用哪種方案引入css,並沒有一個絕對的答案,可以根據各自情況選擇合適的方案
「其他文章」
- Spring中實現非同步呼叫的方式有哪些?
- 帶引數的全型別 Python 裝飾器
- 整理了幾個Python正則表示式,拿走就能用!
- SOLID:開閉原則Go程式碼實戰
- React中如何引入CSS呢
- 一個新視角:前端框架們都卷錯方向了?
- 編碼中的Adapter,不僅是一種設計模式,更是一種架構理念與解決方案
- 手寫程式語言-遞迴函式是如何實現的?
- 一文搞懂模糊匹配:定義、過程與技術
- 新來個阿里 P7,僅花 2 小時,做出一個多執行緒永動任務,看完直接跪了
- Puzzlescript,一種開發H5益智遊戲的引擎
- @Autowired和@Resource到底什麼區別,你明白了嗎?
- CSS transition 小技巧!如何保留 hover 的狀態?
- React如此受歡迎離不開這4個主要原則
- LeCun再炮轟Marcus: 他是心理學家,不是搞AI的
- Java保證執行緒安全的方式有哪些?
- 19個殺手級 JavaScript 單行程式碼,讓你看起來像專業人士
- Python 的"self"引數是什麼?
- 別整一坨 CSS 程式碼了,試試這幾個實用函式
- 再有人問你什麼是MVCC,就把這篇文章發給他!