生活随笔
收集整理的這篇文章主要介紹了
React中的CSS——styled-components
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、認識CSS in JS
實際上，官方文檔也有提到過CSS in JS這種方案：
“CSS-in-JS” 是指一種模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定義； 注意此功能并不是 React 的一部分，而是由第三方庫提供。 React 對樣式如何定義并沒有明確態度； 在傳統的前端開發中，我們通常會將結構（HTML）、樣式（CSS）、邏輯（JavaScript）進行分離。
但是在前面的學習中，我們就提到過，React的思想中認為邏輯本身和UI是無法分離的，所以才會有了JSX的語法。 樣式呢？樣式也是屬于UI的一部分； 事實上CSS-in-JS的模式就是一種將樣式（CSS）也寫入到JavaScript中的方式，并且可以方便的使用JavaScript的狀態； 所以React有被人稱之為 All in JS；
當然，這種開發的方式也受到了很多的批評：
Stop using CSS in JavaScript for web development https://hackernoon.com/stop-using-css-in-javascript-for-web-development-fa32fb873dcc 二、認識styled-components
批評聲音雖然有，但是在我們看來很多優秀的CSS-in-JS的庫依然非常強大、方便：
CSS-in-JS通過JavaScript來為CSS賦予一些能力，包括類似于CSS預處理器一樣的樣式嵌套、函數定義、邏輯復用、動態修改狀態等等； 依然CSS預處理器也具備某些能力，但是獲取動態狀態依然是一個不好處理的點； 所以，目前可以說CSS-in-JS是React編寫CSS最為受歡迎的一種解決方案； 目前比較流行的CSS-in-JS的庫有哪些呢？1. styled-components
目前可以說styled-components依然是社區最流行的CSS-in-JS庫，
yarn add styled
- components
三、ES6標簽模板字符串
ES6中增加了模板字符串的語法，這個對于很多人來說都會使用。 但是模板字符串還有另外一種用法：標簽模板字符串（Tagged Template Literals）。
我們一起來看一個普通的JavaScript的函數：
其實函數還有另外一種調用方式：
如果我們在調用的時候插入其他的變量：
模板字符串被拆分了； 第一個元素是數組，是被模塊字符串拆分的字符串組合； 后面的元素是一個個模塊字符串傳入的內容； 在styled component中，就是通過這種方式來解析模塊字符串，最終生成我們想要的樣式的
< ! DOCTYPE html
>
< html lang
= "en" >
< head
> < meta charset
= "UTF-8" > < title
> Title
< / title
>
< / head
>
< body
> < script
> const name
= 'zep' const age
= 18 function test ( ... args) { console
. log ( args
) } test ( ` my name is ${ name} , age is ${ age} ` ) test
` my name is ${ name} , age is ${ age} ` < / script
>
< / body
>
< / html
>
四、styled的基本使用
styled-components的本質是通過函數的調用，最終創建出一個組件：
這個組件會被自動添加上一個不重復的class； styled-components會給該class添加相關的樣式； 另外，它支持類似于CSS預處理器一樣的樣式嵌套：
支持直接子代選擇器或后代選擇器，并且 直接編寫樣式； 可以通過&符號獲取當前元素； 直接偽類選擇器、偽元素等；
import React
, { PureComponent
} from 'react' ;
import styled
from 'styled-components' const HomeWrapper
= styled
. div
` font-size: 30px;color: skyblue;.banner {background-color: darkolivegreen;span {display: flex;flex-wrap: wrap;color: #fff;&.active {color: #f90;}&:hover {color: pink;}&::after {content: 'aaa';}}}
` const TitleWrapper
= styled
. h2
` text-decoration: underline;font-size: 18px;
` class App extends PureComponent { render ( ) { return ( < HomeWrapper
> < TitleWrapper
> 我是home的標題
< / TitleWrapper
> < div className
= 'banner' > < span
> 輪播圖
1 < / span
> < span className
= 'active' > 輪播圖
2 < / span
> < span
> 輪播圖
3 < / span
> < span
> 輪播圖
4 < / span
> < / div
> < / HomeWrapper
> ) ; }
} export default App
;
在實際項目中的寫法：
五、styled-components 中的props、attrs屬性
props可以穿透
獲取props需要通過${}傳入一個插值函數，props會作為該函數的參數； 這種方式可以有效的解決動態樣式的問題； 添加attrs屬性
import React
, { PureComponent
} from 'react' ;
import styled
from 'styled-components' const HYInput
= styled
. input
. attrs ( { placeholder
: 'zep' , bColor
: 'red'
} ) ` background-color: lightblue;border-color: ${ props => props. bColor} ;color: ${ props => props. color}
` class App extends PureComponent { constructor ( props ) { super ( props
) ; this . state
= { color
: 'blue' } } render ( ) { return ( < div className
= "profile" > < input type
= "password" / > < HYInput type
= "text" color
= { this . state
. color
} / > < h2
> 我是profile的標題
< / h2
> < ul className
= "settings" > < li
> 設置列表
1 < / li
> < li
> 設置列表
2 < / li
> < li
> 設置列表
3 < / li
> < / ul
> < / div
> ) ; }
} export default App
;
六、styled高級特性
支持樣式的繼承
styled設置主題
import React
, { PureComponent
} from 'react' ;
import Home
from '../home'
import Profile
from '../profile'
import styled
, { ThemeProvider
} from "styled-components" ; const HYButton
= styled
. button
` padding: 10px 20px;color: red;border-color: red;
` const HYPrimaryButton
= styled ( HYButton
) ` //padding: 10px 20px;//border-color: red;color: #fff;background-color: green;
` class App extends PureComponent { render ( ) { return ( < ThemeProvider id
= "app" theme
= { { themeColor
: 'yellow' , fontSize
: '30px' } } > < div
> app
< / div
> < hr
/ > < Home
/ > < hr
/ > < Profile
/ > < HYButton
> 我是普通的按鈕
< / HYButton
> < HYPrimaryButton
> 我是primary的按鈕
< / HYPrimaryButton
> < / ThemeProvider
> ) ; }
} export default App
;
import styled
from "styled-components" ;
export const HomeWrapper
= styled
. div
` font-size: 30px;color: skyblue;.banner {background-color: darkolivegreen;span {display: flex;flex-wrap: wrap;color: #fff;&.active {color: #f90;}&:hover {color: pink;}&::after {content: 'aaa';}}}
` export const TitleWrapper
= styled
. h2
` text-decoration: underline;font-size: 18px;color: ${ props => props. theme. themeColor} ;
` 總結
以上是生活随笔 為你收集整理的React中的CSS——styled-components 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
