大致思路:

定义一个变量,名为hover,通过该变量来判断该块是否处于被hover的状态
onMouseOver:鼠标移上来时
onMouseLeave:鼠标移走时
(就像一个Switch开关,实际上只能代替hover的作用,毕竟内联没有伪类)
解释:store.color是mobx定义的全局变量,在头部有引用,在此将它视为一个颜色就好

const [hoverput, setHoverput] = React.useState(false)

function getcolor(hover: boolean) {
   
  return hover ? store.color : ''
}

return (
  <div
    className={
   style.poa}
    onMouseOver={
   () => {
   
      setHoverput(true)
    }}
    onMouseLeave={
   () => {
   
      setHoverput(false)
    }}
    style={
   {
    color: getcolor(hoverput) }}>
    <span className={
   style.poaSpan} id="poaSpan">
      Put
    </span>
    <span className={
   style.poS}>添加</span>
  </div>
)
额外思路:

其实这么写还不如多定义几个类,因为是为了通过mobx去控制主题颜色,那么更改主题颜色的时候更改整个类名,实际上更易于后续管理

  • 但这仍然是一个解决内联没有:hover伪类的好办法