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

style react

Question

Me gusta bastante el patrón CSS en línea en React y decidí usarlo.

Sin embargo, no puede usar :hover y selectores 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 componente en el que se pueda hacer Clickable y usarlo así:

<Clickable>
    <Link />
</Clickable>

El Clickable tiene un estado hovered y lo pasa como accesorios al Enlace. Sin embargo, Clickable (la forma en que lo implementé) envuelve el Link en un div para que pueda establecerlo onMouseEnter y onMouseLeave . Sin embargo, esto complica un poco las cosas (por ejemplo, el span envuelto en un div comporta de manera diferente que el span ).

¿Hay alguna forma más simple?

Answer 1

Agregando a la respuesta de Jonathan , aquí están los eventos para cubrir el enfoque y los estados activos, y usar onMouseOver lugar de onMouseEnter ya que este último no burbujeará si tiene elementos secundarios dentro del objetivo al que se aplica el evento.

var Link = React.createClass({

  getInitialState: function(){
    return {hover: false, active: false, focus: false}
  },

  toggleHover: function(){
    this.setState({hover: !this.state.hover})
  },

  toggleActive: function(){
    this.setState({active: !this.state.active})
  },

  toggleFocus: function(){
    this.setState({focus: !this.state.focus})
  },

  render: function() {
    var linkStyle;
    if (this.state.hover) {
      linkStyle = {backgroundColor: ''red''}
    } else if (this.state.active) {
      linkStyle = {backgroundColor: ''blue''}
    } else if (this.state.focus) {
      linkStyle = {backgroundColor: ''purple''}
    } 

    return(
      <div>
        <a style={linkStyle} 
          onMouseOver={this.toggleHover} 
          onMouseOut={this.toggleHover} 
          onMouseUp={this.toggleActive} 
          onMouseDown={this.toggleActive} 
          onFocus={this.toggleFocus}> 
          Link 
        </a>
      </div>
    )
  }

Answer 2

Aquí está mi solución usando React Hooks. Combina el operador de propagación y el operador ternario.

style.js

.navBarOption:hover {
  color: black;
}

Button.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

Answer 3

Con un uso de los ganchos:

.menu-item:nth-child(1) {
color: white;
background-color: #001b37;
} 

Answer 4

Creo que onMouseEnter y onMouseLeave son los caminos a seguir, pero no veo la necesidad de un componente de 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.

Answer 5

El soporte completo de CSS es exactamente la razón por la que esta gran cantidad de bibliotecas CSSinJS, para hacer esto de manera eficiente, necesita generar CSS real, no estilos en línea. También los estilos en línea son mucho más lentos en reaccionar en un sistema más grande. Descargo de responsabilidad: mantengo JSS .

Answer 6

En lo que respecta a styled-components con styled-components y react-router v4 , puede hacer esto:

 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"
    }
  },

Answer 7

Este puede ser un buen truco para tener un estilo en línea dentro de un componente de reacción (y también usar la función CSS: hover):

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={this.state.hover ? {"backgroundColor": ''red''}: {"backgroundColor": ''blue''}} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
  }

Answer 8

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

Lo que hice fue escribir un mixin que puedes agregar a tu componente que necesita estados de desplazamiento. Este mixin agregará una nueva propiedad hovered al estado de su componente. Se establecerá en true si el usuario se desplaza sobre el nodo DOM principal del componente y lo vuelve a establecer en false si el usuario abandona el elemento.

Ahora en la función de renderización de componentes puede hacer algo como:

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

Ahora, cada vez que cambia el estado del estado hovered , el componente volverá a aparecer.

También he creado un repositorio de sandbox para esto que uso para probar algunos de estos patrones yo mismo. Compruébalo si quieres ver un ejemplo de mi implementación.

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

Answer 9

La manera simple es usar un operador ternario

const styles = {
  container: {
    height: ''3em'',
    backgroundColor: ''white'',
    display: ''flex'',
    flexDirection: ''row'',
    alignItems: ''stretch'',
    justifyContent: ''flex-start'',
    borderBottom: ''1px solid gainsboro'',
  },
  parent: {
    display: ''flex'',
    flex: 1,
    flexDirection: ''row'',
    alignItems: ''stretch'',
    justifyContent: ''flex-start'',
    color: ''darkgrey'',
  },
  child: {
    width: ''6em'',
    textAlign: ''center'',
    verticalAlign: ''middle'',
    lineHeight: ''3em'',
  },
};

var NavBar = (props) => {
  const menuOptions = [''home'', ''blog'', ''projects'', ''about''];

  return (
    <div style={styles.container}>
      <div style={styles.parent}>
        {menuOptions.map((page) => <div className={''navBarOption''} style={styles.child} key={page}>{page}</div> )}
      </div>
    </div>
  );
};


ReactDOM.render(
  <NavBar/>,
  document.getElementById(''app'')
);

Answer 10

Made Style It , en parte, por esta razón (otros están en desacuerdo con la implementación de otras librerías / sintaxis y estilos en línea falta de soporte para prefijar valores de propiedad). Creemos que deberíamos poder simplemente escribir CSS en JavaScript y tener componentes totalmente autónomos HTML-CSS-JS. ¡Con las cadenas de plantilla ES5 / ES6 ahora podemos y también puede ser bonito! :)

npm install style-it --save

Sintaxis Funcional ( JSFIDDLE )

import React from ''react'';
import Style from ''style-it'';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .intro:hover {
          color: red;
        }
      `}

        <p className="intro">CSS-in-JS made simple -- just Style It.</p>
      </Style>
    );
  }
}

export default Intro;

Sintaxis JSX ( JSFIDDLE )

import {NavLink} from ''react-router-dom''

const Link = styled(NavLink)`     
  background: blue;

  &:hover {
    color: white;
  }
`

...
<Clickable><Link to="/somewhere">somewhere</Link></Clickable>

Answer 11

No estoy 100% seguro de si esta es la respuesta, pero es el truco que uso para simular el CSS: efecto de desplazamiento con colores e imágenes en línea.

.menu-item:nth-child(1):hover {
color: green;
background-color: white;
}

CSS:

export default {
  normal:{
    background: ''purple'',
    color: ''#ffffff''
  },
  hover: {
    background: ''red''
  }
}

Antes de flotar

import React, {useState} from ''react'';
import style from ''./style.js''

function Button(){

  const [hover, setHover] = useState(false);

  return(
    <button
      onMouseEnter={()=>{
        setHover(true);
      }}
      onMouseLeave={()=>{
        setHover(false);
      }}
      style={{
        ...style.normal,
        ...(hover ? style.hover : null)
      }}>

        MyButtonText

    </button>
  )
}

En vuelo estacionario

.menu-item:nth-child(1):hover { color: green; background-color: white; }

Ejemplo: https://codepen.io/roryfn/pen/dxyYqj?editors=0011

Answer 12

Puede usar módulos css como alternativa y, además, react-css-modules para la asignación de nombres de clase.

De esa manera, puede importar sus estilos de la siguiente manera y utilizar un CSS normal con ámbito local para sus componentes:

import React from ''react'';
import CSSModules from ''react-css-modules'';
import styles from ''./table.css'';

class Table extends React.Component {
    render () {
        return <div styleName=''table''>
            <div styleName=''row''>
                <div styleName=''cell''>A0</div>
                <div styleName=''cell''>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);

Aquí hay un ejemplo de módulos webpack css

Answer 13

Puede usar Radium: es una herramienta de código abierto para estilos en línea con ReactJS. Agrega exactamente los selectores que necesita. Muy popular, échale un vistazo - Radio en npm

Answer 14

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

import React from ''react'';
import Style from ''style-it'';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .intro:hover {
        color: red;
      }
    `,
      <p className="intro">CSS-in-JS made simple -- just Style It.</p>
    );
  }
}

export default Intro;

Answer 15

Utilizo una solución bastante hack-ish para esto en una de mis aplicaciones recientes que funciona para mis propósitos, y me parece más rápido que escribir funciones de configuración de desplazamiento personalizado en vanilla js (aunque, reconozco, tal vez no sea una mejor práctica en la mayoría de los entornos ..) Entonces, en caso de que todavía estés interesado, aquí va.

Creo un elemento padre solo por mantener los estilos javascript en línea, luego un niño con un className o id en el que se enganchará mi hoja de estilo css y escribiré el estilo de desplazamiento en mi archivo css dedicado. Esto funciona porque el elemento hijo más granular recibe los estilos js en línea a través de la herencia, pero el archivo css anula sus estilos de desplazamiento.

Básicamente, mi archivo CSS actual existe con el único propósito de mantener los efectos de desplazamiento, nada más. Esto lo hace bastante conciso y fácil de administrar, y me permite hacer el trabajo pesado en mis estilos de componentes React en línea.

Aquí hay un ejemplo:

const useFade = () => {
  const [ fade, setFade ] = useState(false);

  const onMouseEnter = () => {
    setFade(true);
  };

  const onMouseLeave = () => {
    setFade(false);
  };

  const fadeStyle = !fade ? {
    opacity: 1, transition: ''all .2s ease-in-out'',
  } : {
    opacity: .5, transition: ''all .2s ease-in-out'',
  };

  return { fadeStyle, onMouseEnter, onMouseLeave };
};

const ListItem = ({ style }) => {
  const { fadeStyle, ...fadeProps } = useFade();

  return (
    <Paper
      style={{...fadeStyle, ...style}}
      {...fadeProps}
    >
      {...}
    </Paper>
  );
};

`This works best with an image`

class TestHover extends React.PureComponent {
render() {
const landingImage = {     
"backgroundImage": "url(https://i.dailymail.co.uk/i/pix/2015/09/01/18/2BE1E88B00000578-3218613-image-m-5_1441127035222.jpg)",
"BackgroundColor": "Red", `this can be any color`
"minHeight": "100%",
"backgroundAttachment": "fixed",
"backgroundPosition": "center",
"backgroundRepeat": "no-repeat",
"backgroundSize": "cover", 
"opacity": "0.8", `the hove trick is here in the opcaity slightly see through gives the effect when the background color changes`
    }

  return (
    <aside className="menu">
        <div className="menu-item">
          <div style={landingImage}>SOME TEXT</div>
        </div>
    </aside>
      ); 
  }
}
ReactDOM.render(
    <TestHover />,
  document.getElementById("root")
);

.menu {
top: 2.70em;
bottom: 0px;
width: 100%;
position: absolute;
}

.menu-item {
cursor: pointer;
height: 100%;
font-size: 2em;
line-height: 1.3em;
color: #000;
font-family: "Poppins";
font-style: italic;
font-weight: 800;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}

Observe que el estilo en línea "hijo" no tiene un conjunto de propiedades "color". Si lo hiciera, esto no funcionaría porque el estilo en línea tendría prioridad sobre mi hoja de estilo.

Answer 16

onMouseOver y onMouseLeave con setState al principio me parecieron un poco pesados, pero como así es como funciona la reacción, me parece la solución más fácil y limpia.

Por ejemplo, renderizar un servidor CSS temático también es una buena solución y mantiene los componentes de reacción más limpios.

Si no tiene que agregar estilos dinámicos a los elementos (por ejemplo, para una temática), no debe usar estilos en línea, sino clases css.

Esta es una regla html / css tradicional para mantener html / JSX limpio y simple.

Answer 17

Typestyle si está utilizando React with Typecript.

A continuación se muestra un código de muestra para: hover

import {style} from "typestyle";

/** convert a style object to a CSS class name */
const niceColors = style({
  transition: ''color .2s'',
  color: ''blue'',
  $nest: {
    ''&:hover'': {
      color: ''red''
    }
  }
});

<h1 className={niceColors}>Hello world</h1>