Estilos CSS en línea en React: ¿cómo implementar un: hover?

Solución:

Creo que onMouseEnter y onMouseLeave son los caminos a seguir, pero no veo la necesidad de un componente contenedor adicional. Así es como lo implementé:

var Link = React.createClass({
  getInitialState: function(){
    return {hover: false}
  },
  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },
  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: 'red'}
    } else {
      linkStyle = {backgroundColor: 'blue'}
    }
    return(
      <div>
        <a style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
}

Luego puede usar el estado de desplazamiento (verdadero / falso) para cambiar el estilo del enlace.

Tarde para la fiesta pero ven con la solución. Puede usar “&” para definir estilos para pasar el mouse nth Child, etc.

day: {
    display: "flex",
    flex: "1",
    justifyContent: "center",
    alignItems: "center",
    width: "50px",
    height: "50px",
    transition: "all 0.2s",
    borderLeft: "solid 1px #cccccc",

    "&:hover": {
      background: "#efefef"
    },
    "&:last-child": {
      borderRight: "solid 1px #cccccc"
    }
},

Estoy en la misma situación. Realmente me gusta el patrón de mantener el estilo en los componentes, pero los estados flotantes parecen ser el último obstáculo.

Lo que hice fue escribir un mixin que puede agregar a su componente que necesita estados flotantes. Este mixin agregará un nuevo hovered propiedad al estado de su componente. Estará configurado para true si el usuario se desplaza sobre el nodo DOM principal del componente y lo vuelve a establecer en false si los usuarios abandonan el elemento.

Ahora, en la función de renderizado de su componente, puede hacer algo como:

<button style={m(
     this.styles.container,
     this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>

Ahora, cada vez que el estado del hovered cambios de estado, el componente se volverá a procesar.

También he creado un repositorio de espacio aislado para esto que utilizo para probar algunos de estos patrones yo mismo. Compruébelo si quiere ver un ejemplo de mi implementación.

https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin

---

---

Utiliza Nuestro Buscador