React css-in-js基礎(chǔ)介紹與應(yīng)用
1. 介紹
CSS-in-JS 是一種技術(shù),而不是一個(gè)具體的庫(kù)實(shí)現(xiàn)。簡(jiǎn)單來(lái)說(shuō) CSS-in-JS 就是將應(yīng)用的CSS樣式寫在 JavaScript 文件里面,而不是獨(dú)立為一些 css,scss 或 less 之類的文件,這樣你就可以在 CSS 中使用一些屬于JS的諸如模塊聲明,變量定義,函數(shù)調(diào)用和條件判斷等語(yǔ)言特性來(lái)提供靈活的可擴(kuò)展的樣式定義。CSS-in-JS 在 React 社區(qū)的熱度是最高的,這是因?yàn)?React 本身不會(huì)管用戶怎么去為組件定義樣式的問(wèn)題,而 Vue 有屬于框架自己的一套定義樣式的方案。
styled-components 應(yīng)該是 CSS-in-JS 最熱門的一個(gè)庫(kù),通過(guò) styled-components,你可以使用 ES6 的標(biāo)簽?zāi)0遄址Z(yǔ)法,為需要 styled 的 Component 定義一系列 CSS 屬性,當(dāng)該組件的 JS 代碼被解析執(zhí)行的時(shí)候,styled-components 會(huì)動(dòng)態(tài)生成一個(gè) CSS 選擇器,并把對(duì)應(yīng)的 CSS 樣式通過(guò) style 標(biāo)簽的形式插入到 head 標(biāo)簽里面。動(dòng)態(tài)生成的 CSS 選擇器會(huì)有一小段哈希值來(lái)保證全局唯一性來(lái)避免樣式發(fā)生沖突。
在react項(xiàng)目中,可以讓樣式命名不沖突的方案
- 定義樣式名稱時(shí),就讓它唯一
- 使用內(nèi)置的cssModule
- css-in-js 把css當(dāng)作js來(lái)使用
2. 使用
首先需要安裝相關(guān)包:
yarn add styled-components
使用:
App.jsx:
import React, { Component } from 'react' import Child from './components/Child-07-樣式' class App extends Component { render() { return ( <div> <Child /> </div> ) } } export default App
Child.jsx:
import React, { Component } from 'react' // 導(dǎo)入樣式組件 import { ChildContainer, TitleContainer, SubTitleContainer, ContentContainer } from './style' class Child extends Component { render() { return ( <ChildContainer> {/* <TitleContainer>我是一個(gè)child組件</TitleContainer> */} {/* 嵌套使用 */} <div className="title">我是一個(gè)child組件</div> <SubTitleContainer>我是一個(gè)副標(biāo)題</SubTitleContainer> <hr /> {/* 屬性傳遞 */} <ContentContainer color='#00f' size="20"> 我是內(nèi)容 </ContentContainer> </ChildContainer> ) } } export default Child
style.js:
// 使用css-in-js技術(shù)方案完成 react項(xiàng)目中的樣式編寫 // styled-components把樣式當(dāng)作組件來(lái)定義和使用,樣式就是組件,組件就是樣式 import styled from 'styled-components' // 語(yǔ)法 // export const ChildContainer = styled.html標(biāo)簽名`樣式` export const ChildContainer = styled.div` /* 在此字符串模板中,寫css就可以了 */ font-size: 30px; color:#f0f; /* 嵌套定義 */ .title{ font-size:18px; } ` export const TitleContainer = styled.div` color:red; font-size:18px; ` // 樣式繼承 export const SubTitleContainer = styled(TitleContainer)` font-size:14px; ` // 在樣式中獲取樣式組件中的屬性信息 export const ContentContainer = styled.div` color:${props => props.color || '#888'}; font-size: ${props => props.size || 12}px; `
到此這篇關(guān)于React css-in-js基礎(chǔ)介紹與應(yīng)用的文章就介紹到這了,更多相關(guān)React css-in-js內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
通過(guò)React-Native實(shí)現(xiàn)自定義橫向滑動(dòng)進(jìn)度條的 ScrollView組件
開發(fā)一個(gè)首頁(yè)擺放菜單入口的ScrollView可滑動(dòng)組件,允許自定義橫向滑動(dòng)進(jìn)度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序?yàn)榭v向由上至下依次排列,對(duì)React Native橫向滑動(dòng)進(jìn)度條相關(guān)知識(shí)感興趣的朋友一起看看吧2024-02-02React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解
這篇文章主要為大家介紹了React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒(méi)有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫(kù),本文給大家介紹React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程,感興趣的朋友跟隨小編一起看看吧2024-06-06react源碼層深入刨析babel解析jsx實(shí)現(xiàn)
同作為MVVM框架,React相比于Vue來(lái)講,上手更需要JavaScript功底深厚一些,本系列將閱讀React相關(guān)源碼,從jsx -> VDom -> RDOM等一些列的過(guò)程,將會(huì)在本系列中一一講解2022-10-10使用React+SpringBoot開發(fā)一個(gè)協(xié)同編輯的表格文檔實(shí)現(xiàn)步驟
隨著云計(jì)算和團(tuán)隊(duì)協(xié)作的興起,協(xié)同編輯成為了許多企業(yè)和組織中必不可少的需求,本文小編就將為大家介紹如何使用React+SpringBoot簡(jiǎn)單的開發(fā)一個(gè)協(xié)同編輯的表格文檔,感興趣的朋友一起看看吧2023-11-11react-native DatePicker日期選擇組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了react-native DatePicker日期選擇組件的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,有興趣的可以了解下2017-09-09