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中的setState执行机制
setState是React组件中用于更新状态的方法,是类组件中的方法,用于更新组件的状态并重新渲染组件,本文给大家详细介绍了React中的setState执行机制,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-12-12
react嵌套路由实现TabBar的实现
本文主要介绍了react嵌套路由实现TabBar的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
React useMemo与useCallabck有什么区别
useCallback和useMemo是一样的东西，只是入参有所不同，useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return
2022-12-12
解决React报错Encountered two children with the same key
这篇文章主要为大家介绍了React报错Encountered two children with the same key解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
浅谈React组件props默认值的设置
本文主要介绍了浅谈React组件props默认值的设置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
react-router-dom v6版本跳转路径的实现方法
这篇文章主要介绍了react-router-dom v6版本跳转路径的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React中使用async validator进行表单验证的实例代码
react上进行表单验证是很繁琐的，在这里使用async-validator处理起来就变的很方便了，接下来通过本文给大家介绍React中使用async validator进行表单验证的方法,需要的朋友可以参考下
2018-08-08
使用React封装一个Tree树形组件的实例代码
这篇文章主要介绍了使用React封装一个Tree树形组件的实例,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-03-03
React受控组件与非受控组件深入讲解
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧
2022-12-12
前端 react 实现图片上传前压缩(缩率图)
这篇文章主要介绍了前端 react 实现图片上传前压缩(缩率图),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-08-08