Estilos CSS en línea en React: ¿cómo implementar a:hover?
Me gusta bastante el patrón CSS en línea en React y decidí usarlo.
Sin embargo, no puede utilizar :hoverselectores similares. Entonces, ¿cuál es la mejor manera de implementar el resaltado al pasar el mouse mientras se usan estilos CSS en línea?
Una sugerencia de #reactjs es tener un Clickablecomponente y usarlo así:
<Clickable>
<Link />
</Clickable>
Tiene Clickableun hoveredestado y lo pasa como accesorios al enlace. Sin embargo, Clickable(la forma en que lo implementé) envuelve el Linken a divpara que pueda onMouseEnterconfigurarlo onMouseLeave. Sin embargo, esto complica un poco las cosas (por ejemplo, spanenvuelto en a divse comporta de manera diferente que span).
¿Hay alguna forma más simple?
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 vengo con la solución. Puede utilizar "&" para definir estilos para pasar el cursor sobre el enésimo niño, 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"
}
},
