React如何動(dòng)態(tài)控制偽元素樣式
更新時(shí)間：2023年11月14日 08:42:46 作者：cofecode
這篇文章主要介紹了React如何動(dòng)態(tài)控制偽元素樣式問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
react動(dòng)態(tài)控制偽類(lè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下，偽元素的樣式寫(xiě)多個(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ù)選框的背景色，顏色由用戶(hù)任意從選色盤(pán)選取
解決
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)文章
詳解超簡(jiǎn)單的react服務(wù)器渲染(ssr)入坑指南
這篇文章主要介紹了詳解超簡(jiǎn)單的react服務(wù)器渲染(ssr)入坑指南，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了React 使用Effect Hook的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
Zustand介紹與使用 React狀態(tài)管理工具的解決方案
本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫(kù),Zustand以簡(jiǎn)潔易用、靈活性高及最小化原則等特點(diǎn)脫穎而出,旨在提供簡(jiǎn)單而強(qiáng)大的狀態(tài)管理功能2024-10-10
這篇文章主要介紹了React Redux Hooks的使用詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
解決React報(bào)錯(cuò)You provided a `checked` prop&n
這篇文章主要為大家介紹了React報(bào)錯(cuò)You provided a `checked` prop to a form field的解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了React事件綁定，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
基于react hooks,zarm組件庫(kù)配置開(kāi)發(fā)h5表單頁(yè)面的實(shí)例代碼
這篇文章主要介紹了基于react hooks,zarm組件庫(kù)配置開(kāi)發(fā)h5表單頁(yè)面,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來(lái)減少內(nèi)存占用2022-09-09
react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問(wèn)題
這篇文章主要介紹了react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了react中useRef的應(yīng)用使用詳解的相關(guān)資料,需要的朋友可以參考下2023-05-05