React如何动态控制伪元素样式
作者：cofecode
这篇文章主要介绍了React如何动态控制伪元素样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react动态控制伪类样式
方法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动态改变css的伪元素样式
情景
需要动态改变checkbox的选中的复选框的背景色，颜色由用户任意从选色盘选取
解决
react里的代码
<input type="checkbox" value={option.value} style={{ '--bgColor': optionColor }} />less里的代码
input[type='checkbox']:checked {
background: var(--bgColor);
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。