如何以在线样式添加悬停？

【问题标题】：how to add hover in in-line style?如何以在线样式添加悬停？
【发布时间】：2020-02-14 20:34:22
【问题描述】：

我使用了 ant design 中的 Button 标签，并根据样式更改了它的颜色。现在我想为这个按钮添加悬停颜色。我该怎么做？

export default class NavBar extends React.Component{

  render(){
    return(
      <div>
        <PageHeader
          style={{
            border: '10% solid rgb(235, 237, 240)',
          }}
          title=""
          extra={[
            <Button type='link' style={{ color: "brown"}} key="1" href='/'>Home</Button>,
          ]}
        />
      </div>
    );
  }
}

【问题讨论】：

标签： reactjs typescript styles antd

【解决方案1】：

有许多鼠标事件道具可以添加到可能对您有帮助的组件中：

onMouseDown || onMouseEnter ||鼠标离开 ||鼠标移动 || onMouseOut ||鼠标悬停 || onMouseUp

等等... https://reactjs.org/docs/events.html#mouse-events

我会尝试：

export default class NavBar extends React.Component{
    state={
        buttonColor: 'brown'
    }
    render(){
        return(
            <div>
                <PageHeader
                    style={{
                        border: '10% solid rgb(235, 237, 240)',
                    }}
                    title=""
                    extra={[
                        <Button  
                            style={{ color: this.state.buttonColor }} 
                            onMouseEnter={()=>this.setState({ color: 'blue' })}
                            onMouseLeave={()=>this.setState({ color: 'brown' })}
                            key="1" 
                            href='/'
                            type='link'
                        >
                            Home
                        </Button>,
                    ]}
                />
            </div>
        );
    }
}

【讨论】：