web-dev-qa-db-fra.com

Comment faire CSS: hover fonction dans JSX?

Bonjour et merci pour le bon travail ici. J'utilise react.js pour mon projet pour construire mes composants et je me sens un peu coincé dans mon projet en ce moment. J'essaie d'appeler un bouton avec une fonction de survol et je ne sais pas comment l'appliquer pour réagir.

Voici le code: 

let button = {
    backgroundColor: colorPalette.white,
    border: "1px solid rgb(12,106,145)",
    color: colorPalette.brandCol1,
    textAlign: 'center',
    textDecoration: 'none',
    fontSize : 'inherit',
    fontWeight : 600,
    padding : "5px 8px 5px 8px"
}

et je voudrais ajouter un style de survol à elle comme nous le faisons en css avec 

button:hover {
style here.......
}

Quelle est la syntaxe correcte? 

reactjsjsx
5
user8116786

Vous pouvez utiliser onMouseEnteronMouseLeave pour ajuster l’état du composant.

<button
  onMouseEnter={() => setButtonHovered(true)} 
  onMouseLeave={() => setButtonHovered(false)}
  className={buttonIsHovered ? 'hover' : null}
/>

voir ici pour plus d'informations

ou simplement utiliser une classe css?

import './style.css'

<button className="Button"/>

.Button:hover {
  ...
}
4
Tyler Sebastian

Vous pouvez utiliser:

    const styles = {
    myStyleClassName: {
            padding: '16px 0px 16px 0px',
            '& a': {
                textDecoration: 'none',
                color: '#0000ee',
            },
            '& a:hover': {
            textDecoration: 'underline',
        },
    },
    myButtonClass: {
        '&:hover': {
             textDecoration: 'underline',
        },       
    },
};

.... 

render() {
    <span className={myStyleClassName}><a tag><button><someDomObjct></span>
    <button className={myButtonClass}>my label</button>
}

Voir: http://cssinjs.org/jss-nested/?v=v6.0.1 Le repo n'est pas nécessaire pour tout, mais ce qui précède devrait fonctionner immédiatement.

3
generalG

Utiliser react pour gérer l’état d’une animation en survol est excessif. Vous ne devriez pas avoir besoin d’utiliser javascript pour un survol simple en CSS ... Vous êtes dans le navigateur, utilisez le bon outil pour le bon job, non? 

Je vais donc vous montrer ici deux façons différentes d’atteindre le même objectif:

Dans mon composant, j'importe le glamour et mon fichier de styles:

import { style } from 'glamor';
import styles from '../styles';

Et dans mon fichier de styles, j'ai quelque chose comme ça:

import { style } from 'glamor';

const styles = {
redHoverbutton: style({
  backgroundColor: "#aaaaaa",
  fontSize: "1.1rem",
  transition: "all ease .5s",
  ":hover": {
    backgroundColor: "#ff0000",
    color: "#ffffff"
  }
})
};

export default styles;

Et cela fait fonctionner la fonctionnalité de survol via css, comme ceci:

<div {...styles.redHoverbutton}></div>

Il s'agit d'un effet de survol piloté par css (avec une transition si vous avez remarqué) mais ce n'est pas un css en ligne. Néanmoins, votre style peut être créé dans le même fichier, comme ceci:

let theStyle = style({ backgroundColor: "#aaaaaa",transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } });

return (<div {...theStyle}>Hover me!</div>);

Maintenant, comment obtenir le style et l'opérateur spread sur la même ligne et à l'intérieur de l'élément JSX?

<div {...style({ backgroundColor: "#aaaaaa", height: "30px", width: "100%", padding: "6px", fontsize: "16px", transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } })}>Hover Me!</div>

Ce n'est peut-être pas parfait, mais cela fonctionne bien et permet d'obtenir le même style qu'un véritable style en ligne et de manière similaire.

0
John