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
    }
}