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