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

Question

我使用了 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>
    );
  }
}

Answer 1

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

onMouseDown || onMouseEnter || onMouseLeave || onMouseMove || onMouseOut || onMouseOver || 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>
        );
    }
}

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

how to add hover in in-line style?

styles

typescript

reactjs

antd