React如何动态控制伪元素样式

更新时间：2023年11月14日 08:42:46 作者：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);
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解超简单的react服务器渲染(ssr)入坑指南
这篇文章主要介绍了详解超简单的react服务器渲染(ssr)入坑指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
React Hook之使用Effect Hook的方法
这篇文章主要为大家详细介绍了React 使用Effect Hook的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
Zustand介绍与使用 React状态管理工具的解决方案
本文主要介绍了Zustand,一种基于React的状态管理库,Zustand以简洁易用、灵活性高及最小化原则等特点脱颖而出,旨在提供简单而强大的状态管理功能
2024-10-10
React中Redux Hooks的使用详解
这篇文章主要介绍了React Redux Hooks的使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
解决React报错You provided a `checked` prop&n
这篇文章主要为大家介绍了React报错You provided a `checked` prop to a form field的解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
React事件绑定详解
这篇文章主要为大家介绍了React事件绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
基于react hooks,zarm组件库配置开发h5表单页面的实例代码
这篇文章主要介绍了基于react hooks,zarm组件库配置开发h5表单页面,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
React Immutable使用方法详细介绍
Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用
2022-09-09
react hooks使用Echarts图表中遇到的情况及相关配置问题
这篇文章主要介绍了react hooks使用Echarts图表中遇到的情况及相关配置问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
react中useRef的应用使用详解
这篇文章主要介绍了react中useRef的应用使用详解的相关资料,需要的朋友可以参考下
2023-05-05