React如何動(dòng)態(tài)控制偽元素樣式
更新時(shí)間：2023年11月14日 08:42:46 作者：cofecode
這篇文章主要介紹了React如何動(dòng)態(tài)控制偽元素樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
react動(dòng)態(tài)控制偽類樣式
方法1
React 傳入變量 ‘–color’
export default function ToolTip(props) {
let { color } = props
return <div style={{'--color': color}}>
<span></span>
</div>
}
css 使用var(–xx) 讀取變量
.tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent var(--color) transparent transparent;
}
方法2
傳入不同的className，偽元素限制在不同的class下，偽元素的樣式寫多個(gè)
export default function ToolTip(props) {
let { domName } = props
return <div className={domName} >
<span></span>
</div>
}
.tooltip_wrap {
.tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
xxx
}
}
.tooltip_wrap2 {
.tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
xxx
}
}
react動(dòng)態(tài)改變css的偽元素樣式
情景
需要?jiǎng)討B(tài)改變checkbox的選中的復(fù)選框的背景色，顏色由用戶任意從選色盤選取
解決
react里的代碼
<input type="checkbox" value={option.value} style={{ '--bgColor': optionColor }} />less里的代碼
input[type='checkbox']:checked {
background: var(--bgColor);
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解React中的setState執(zhí)行機(jī)制
setState是React組件中用于更新狀態(tài)的方法,是類組件中的方法,用于更新組件的狀態(tài)并重新渲染組件,本文給大家詳細(xì)介紹了React中的setState執(zhí)行機(jī)制,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
react嵌套路由實(shí)現(xiàn)TabBar的實(shí)現(xiàn)
本文主要介紹了react嵌套路由實(shí)現(xiàn)TabBar的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
React useMemo與useCallabck有什么區(qū)別
useCallback和useMemo是一樣的東西，只是入?yún)⒂兴煌?，useCallback緩存的是回調(diào)函數(shù)，如果依賴項(xiàng)沒有更新，就會(huì)使用緩存的回調(diào)函數(shù)；useMemo緩存的是回調(diào)函數(shù)的return，如果依賴項(xiàng)沒有更新，就會(huì)使用緩存的return2022-12-12
解決React報(bào)錯(cuò)Encountered?two?children?with?the?same?key
這篇文章主要為大家介紹了React報(bào)錯(cuò)Encountered?two?children?with?the?same?key解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
淺談React組件props默認(rèn)值的設(shè)置
本文主要介紹了淺談React組件props默認(rèn)值的設(shè)置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法
這篇文章主要介紹了react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React中使用async validator進(jìn)行表單驗(yàn)證的實(shí)例代碼
react上進(jìn)行表單驗(yàn)證是很繁瑣的，在這里使用async-validator處理起來就變的很方便了，接下來通過本文給大家介紹React中使用async validator進(jìn)行表單驗(yàn)證的方法,需要的朋友可以參考下2018-08-08
使用React封裝一個(gè)Tree樹形組件的實(shí)例代碼
這篇文章主要介紹了使用React封裝一個(gè)Tree樹形組件的實(shí)例,文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制。可以使用受控組件來實(shí)現(xiàn)。下面就說說這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧2022-12-12
前端 react 實(shí)現(xiàn)圖片上傳前壓縮(縮率圖)
這篇文章主要介紹了前端 react 實(shí)現(xiàn)圖片上傳前壓縮(縮率圖),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08