как добавить наведение в стиле in-line?

Question

Я использовал тэг Button от ant design и меняю его цвет со стилем. Теперь я хочу добавить цвет наведения к этой кнопке. Как я могу это сделать?

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