React引入css的幾種方式及應(yīng)用小結(jié)
更新時(shí)間：2024年03月02日 14:55:05 作者：sunshine_程序媛
這篇文章主要介紹了React引入css的幾種方式及應(yīng)用小結(jié),操作styled組件的樣式屬性,可在組件標(biāo)簽上定義屬性、也可以通過(guò)attrs定義屬性,本文通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
1.直接引入css文件
import "./parent.css"
2.引入css模塊，定義文件名[組件名.module.css]；該方式可避免類名的重復(fù)，每個(gè)組件都有獨(dú)立的作用域，避免了全局污染，保證了類名的唯一性
import styles from "./parent1.module.css"
.title{
color: red;
}
<h2 className={styles.title} style={{ background:'pink' }}>我是父組件</h2>3.第三方依賴庫(kù)styled-components，需要下載第三方依賴庫(kù)，定義每個(gè)組件的樣式
下載依賴庫(kù)指令：npm install styled-components -S
import styleComponents from "styled-components"
// 自定義樣式的組件 注意定義的首字母大寫(xiě)，不然不生效
const StyleP = styleComponents.p`
color: green;
font-size: 30px;
font-weight: bolder;
`
const StyleTitle = styleComponents.h1`
color: red
`
<StyleTitle>第三方庫(kù)引入css demo</StyleTitle>
<StyleP>第三方庫(kù)引入css demo</StyleP>4.應(yīng)用
（1）傳參；在組件標(biāo)簽上綁定參數(shù)，通過(guò)箭頭函數(shù)獲取并操作參數(shù)
const Wrapper = styled.div`
width: ${props => props.wrapperWidth};
height: ${({wrapperHeight}) =>parseInt(wrapperHeight)/2 + 'px'};
background: red;
`
<Wrapper wrapperWidth="200px" wrapperHeight="100px"></Wrapper>（2）繼承；通話styled來(lái)繼承父組件的樣式屬性
const ParentItem = styled.div`
display: block;
color: yellow;
text-align: center;
line-height: 1.5;
font-size: 20px;
`
const Item = styled(ParentItem)`
color: blue;
font-size: 16px;
&:nth-child(2n-1){
background: #00ffe4;
}
`
<ParentItem style={{color: 'red'}}>姜虎東</ParentItem>
<Item>都到曦</Item>
<Item style={{color: '#fff'}}>鄭九元</Item>（3）操作styled組件的樣式屬性；可在組件標(biāo)簽上定義屬性、也可以通過(guò)attrs定義屬性
const UserInput = styled.input`
display: block;
width: 500px;
`
// 通過(guò)attr定義屬性
const PasswordInput = styled.input.attrs(({ type, placeholder }) => ({
type: type ? type : 'text',
placeholder: placeholder || '請(qǐng)輸入'
}))`
display: block;
`
用戶名：<UserInput value={this.state.username} type="text" placeholder="請(qǐng)輸入用戶名"></UserInput>
用戶：<PasswordInput value={this.state.username}></PasswordInput>
{/* 在組件標(biāo)簽上定義屬性 */}
密碼：<PasswordInput value={this.state.password} type="password" placeholder="請(qǐng)輸入密碼"></PasswordInput>到此這篇關(guān)于React引入css的幾種方式以及應(yīng)用的文章就介紹到這了,更多相關(guān)React引入css內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù),廣泛應(yīng)用于開(kāi)發(fā)現(xiàn)代單頁(yè)應(yīng)用（SPA）,在 React 中,狀態(tài)管理是一個(gè)關(guān)鍵概念,因?yàn)樗苯佑绊懙浇M件的渲染和用戶體驗(yàn),本文將深入探討 React 中如何更新組件狀態(tài),需要的朋友可以參考下2025-06-06
React中處理表單數(shù)據(jù)實(shí)現(xiàn)方式
本文介紹了如何在React中處理表單數(shù)據(jù),包括控制組件和非控制組件的使用,通過(guò)控制組件,表單的輸入值由React組件的狀態(tài)控制；非控制組件通過(guò)ref來(lái)訪問(wèn)表單輸入的當(dāng)前值,文章還展示了如何處理多個(gè)輸入和添加驗(yàn)證和樣式,以提供更好的用戶體驗(yàn)2025-02-02
react項(xiàng)目使用json-server模擬接口獲取數(shù)據(jù)的操作方法
文章介紹了如何在React項(xiàng)目中使用json-server模擬接口并獲取數(shù)據(jù),首先安裝json-server,創(chuàng)建JSON格式的數(shù)據(jù)文件,并在package.json中添加啟動(dòng)命令,啟動(dòng)服務(wù)后,可以通過(guò)指定的路徑獲取模擬的數(shù)據(jù),感興趣的朋友一起看看吧2025-11-11
工程級(jí)?React?注冊(cè)登錄全棧級(jí)流程分析
這篇文章主要介紹了工程級(jí)?React?注冊(cè)登錄全棧級(jí)流程,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
使用React代碼動(dòng)態(tài)生成柵格布局的方法
這篇文章主要介紹了使用React簡(jiǎn)短代碼動(dòng)態(tài)生成柵格布局的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類組件中this綁定
這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實(shí)現(xiàn)React類組件中this綁定，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
基于json-render的流式表單渲染方案詳細(xì)解析
json-render是由vercel開(kāi)源的一項(xiàng)前沿技術(shù),旨在應(yīng)對(duì)ai自動(dòng)生成ui過(guò)程中常見(jiàn)的不可控性難題,這篇文章主要介紹了基于json-render的流式表單渲染方案的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-06-06
ahooks整體架構(gòu)及React工具庫(kù)源碼解讀
這篇文章主要為大家介紹了ahooks整體架構(gòu)及React工具庫(kù)的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)React自動(dòng)化實(shí)現(xiàn)骨架屏,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
手動(dòng)用webpack搭建第一個(gè)ReactApp的示例
本篇文章主要介紹了手動(dòng)用webpack搭第一個(gè) ReactApp的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04