摘要:樣式化組件巧妙地利用標簽模板把和組件結合在一起,使得組件跟樣式之間的界限變得模糊。由于和都是組件,因此我們可以跟其他任何組件一樣使用它們,最終的效果如下使用樣式化組件來寫樣式跟普通的寫法是一模一樣的。
在 React 中寫 CSS 一直是大家覺得不太爽的地方。
有沒有一種更好的 CSS 方案呢?對于這個問題,社區(qū)也一直在探索,從未停止過。
本文介紹了 React 相關的三種 CSS 方案,希望能夠幫助大家在 React 路上越走越順暢。
CSS as Object在 React 中,一切皆為 JS 。包括看起來像是 HTML 的 JSX ,它最終也還是轉化為 JS 。CSS 也不例外,它必須被表述為 JS 對象才能在組件中使用。作為最原始的方案,它由 Facebook 官方提出,并且開啟了 CSS in JS 的熱潮。
最原始的用法如下所示:
const divStyle = { color: "blue", fontSize: 20, WebkitTransition: "all", msTransition: "all", }; const HelloWorldComponent = () => (Hello World!);
從中可以看出,開發(fā)者首先要使用 JS 對象來書寫 CSS ,然后通過 style 屬性賦值給組件元素。在 React 內部,會把這個 CSS 對象轉化為樣式字符串,最終渲染的時候變成元素的行內樣式。
這種方式有以下讓人詬病的地方:
樣式屬性名稱的命名方式與傳統(tǒng) CSS 不同
樣式屬性名稱無法自動提示并補全
樣式值略有差異,如上例中的字體大小 20px 寫為 20
無法充分利用自動補全瀏覽器前綴的功能,需要手動添加前綴
無法抽離成獨立的樣式文件
無法有效復用基礎樣式
如果仔細看上面的代碼的話,可以發(fā)現(xiàn)樣式屬性名稱的命名并不是駝峰式命名那么簡單,它還存在一些不規(guī)則的命名。比如 WebkitTransition 中的 W 是大寫的,msTransition 中的 m 則是小寫的。
為了改善這些弊端,社區(qū)中出現(xiàn)了輕量級的小工具 polished.js。
CSS as Functionpolished.js 是一個 CSS in JS 的輕量級工具集。最早的版本 v1.0.1 發(fā)布于 2017.03.30 ,至今將近一年。
它總共封裝了以下五大類別的工具函數(shù):
混合函數(shù)(Mixins)
顏色函數(shù)(Color)
快捷函數(shù)(Shorthands)
幫助函數(shù)(Helpers)
類型函數(shù)(Types)
使用這些函數(shù)可以讓我們不用直接編寫樣式屬性名稱,也在一定程度上實現(xiàn)了樣式復用。
來看下具體的例子:
import { wordWrap } from "polished"; const style = { ...wordWrap("break-word") } // 等效于 const style = { overflowWrap: "break-word", wordWrap: "break-word", wordBreak: "break-all", }
或者更簡單的例子:
import { size } from "polished"; const style = { ...size("300px", "250px") } // 等效于 const style = { height: "300px", width: "250px" }
可以看出,這工具函數(shù)確實能提高一些編碼效率。但是,記住這些工具函數(shù)也加大了學習成本,給人一種得不償失的感覺。因此,這種方案也沒能流行起來,我們仍然需要一種更好的 CSS 編碼方案。
CSS as Componentpolished.js 雖然并沒有流行起來,但是他們的開發(fā)團隊卻整出了另一個更加絕妙的方案,那就是樣式化組件(Styled Components)。
樣式化組件巧妙地利用 ES6 標簽模板把 CSS 和組件結合在一起,使得組件跟樣式之間的界限變得模糊。這意味著,當我們在寫樣式的時候,我們其實也在定義一個普通的 React 組件。反過來,開發(fā)者也可以像寫組件一樣,非常自然地寫樣式。
如果對標簽模板還不太了解,可以參考ECMAScript 6 入門,里面有詳細的講解。
事不宜遲,來看看這種巧妙地寫法:
import React from "react"; import { render } from "react-dom"; import styled from "styled-components"; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` padding: 4em; background: papayawhip; `; render(, document.getElementById("root") ); Hello World, this is my first styled component!
上面我們先后使用 styled.h1 和 styled.section 創(chuàng)建了 Title 和 Wrapper 兩個組件,它們會生成包含相應樣式的 和 標簽。由于 Title 和 Wrapper 都是組件,因此我們可以跟其他任何 React 組件一樣使用它們,最終的效果如下:
使用樣式化組件來寫樣式跟普通的 CSS 寫法是一模一樣的。也不用擔心自動補全、瀏覽器前綴自動補全和語法高亮等問題,這些都有很好的工具支持,適合所有主流編輯器。
比如語法高亮后長這般模樣:
當然,styled-component 還支持很多其他高級功能,比如設置樣式主題、組件復用、樣式拓展、媒體模板等,更詳細的用法請參考官方文檔。
除此以外,它還建立起了自己的生態(tài),提供了豐富的基本樣式化組件、網(wǎng)格系統(tǒng)和輔助插件等等。
可以說,styled-components 讓 React 組件開發(fā)變得更加輕松愉悅!
最后,Happy Coding~
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115813.html
摘要:能最大化地結合現(xiàn)有生態(tài)預處理器后處理器等和模塊化能力,幾乎零學習成本。編碼相關的所有樣式上例中打印的結果是注意到是按照自動生成的名。實踐手動引用渲染結果使用可以實現(xiàn)使用屬性自動加載模塊。 文章同步于Github Pines-Cheng/blog 隨著前端這幾年的風生水起,CSS作為前端的三劍客之一,各種技術方案也是層出不窮。從CSS prepocessor(SASS、LESS、Styl...
VSCode使ReactVue代碼調試變得更爽 在前段開發(fā)中,大家會遇見調試 Vue/React 代碼,現(xiàn)在就給大家總結都有哪幾種: 先找代碼問題,在console.log 打印日志,用 Chrome Devtools 的 debugger 來調試,用 VSCode 的 debugger 來調試。 看到是不是不同,不僅效率大大提升就連體驗也是超級幫的,這種體驗讓人超級爽到爆炸?! 『芏?..
摘要:的主要作用是用于組件保存控制修改自己的可變狀態(tài)。它們都可以決定組件的行為和顯示形態(tài)。但是它們的職責其實非常明晰分明是讓組件控制自己的狀態(tài),是讓外部對組件自己進行配置。下一節(jié)中我們將介紹小書渲染列表數(shù)據(jù)。 React.js 小書 Lesson12 - state vs props 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesso...
閱讀 1093·2021-10-12 10:11
閱讀 876·2019-08-30 15:53
閱讀 2286·2019-08-30 14:15
閱讀 2961·2019-08-30 14:09
閱讀 1196·2019-08-29 17:24
閱讀 971·2019-08-26 18:27
閱讀 1282·2019-08-26 11:57
閱讀 2145·2019-08-23 18:23