Inline CSS styles in React: comment implémenter un: hover?

J’aime bien le modèle CSS intégré dans React et j’ai décidé de l’utiliser.

Cependant, vous ne pouvez pas utiliser les sélecteurs :hover et similaires. Alors, quelle est la meilleure façon de mettre en œuvre le surlignage en utilisant des styles CSS en ligne?

Une suggestion de #reactjs est d’avoir un composant Clickable et de l’utiliser comme ceci:

    

Le Clickable a un état hovered et le transmet en tant que props au lien. Cependant, le Clickable (la façon dont je l’ai implémenté) encapsule le Link dans un div afin qu’il puisse lui onMouseEnter et onMouseLeave . Cela rend les choses un peu compliquées (ex. span enveloppé dans un div se comporte différemment que span ).

Y a-t-il un moyen plus simple?

Je suis dans la même situation. Vraiment comme le modèle de garder le style dans les composants, mais le vol stationnaire semble être le dernier obstacle.

Ce que j’ai fait, c’est écrire un mixin que vous pouvez append à votre composant et qui nécessite des états de survol. Ce mixin appenda une nouvelle propriété hovered à l’état de votre composant. Il sera mis à true si l’utilisateur survole le noeud DOM principal du composant et le redéfinit sur false si les utilisateurs quittent l’élément.

Maintenant, dans votre fonction de rendu de composant, vous pouvez faire quelque chose comme:

  

Maintenant, à chaque fois que l’état de l’état hovered change, le composant sera à nouveau rendu.

J’ai également créé un référentiel Sandbox pour tester certains de ces modèles. Vérifiez-le si vous voulez voir un exemple de mon implémentation.

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

Je pense que onMouseEnter et onMouseLeave sont les moyens d’y parvenir, mais je ne vois pas la nécessité d’un composant wrapper supplémentaire. Voici comment je l’ai implémenté:

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

Vous pouvez ensuite utiliser l’état du survol (true / false) pour changer le style du lien.

Vous pouvez utiliser Radium – c’est un outil open source pour les styles en ligne avec ReactJS. Il ajoute exactement les sélecteurs dont vous avez besoin. Très populaire, regardez-le – Radium on npm

La prise en charge complète de CSS est exactement la raison de cette énorme quantité de bibliothèques CSSinJS. Pour faire cela efficacement, vous devez générer des styles CSS, et non des styles en ligne. De plus, les styles en ligne réagissent beaucoup plus lentement dans un système plus grand. Disclaimer – Je maintiens JSS .

Made Style It – en partie – à cause de cette raison (d’autres étant des désaccords avec l’implémentation d’autres libs / syntax et des styles inline sans prise en charge de la préfixation des valeurs de propriété). Croyez que nous devrions pouvoir écrire simplement du CSS en JavaScript et avoir des composants entièrement autonomes HTML-CSS-JS. Avec les chaînes de modèles ES5 / ES6, nous pouvons maintenant et cela peut être joli aussi! 🙂

npm install style-it --save

Syntaxe fonctionnelle ( JSFIDDLE )

 import React from 'react'; import Style from 'style-it'; class Intro extends React.Component { render() { return Style.it(` .intro:hover { color: red; } `, 

CSS-in-JS made simple -- just Style It.

); } } export default Intro;

Syntaxe JSX ( JSFIDDLE )

 import React from 'react'; import Style from 'style-it'; class Intro extends React.Component { render() { return (  ); } } export default Intro; 

Vous pouvez utiliser des modules css comme alternative, et en outre react-css-modules pour le mappage de noms de classes.

De cette façon, vous pouvez importer vos styles de la manière suivante et utiliser les règles CSS classiques localement pour vos composants:

 import React from 'react'; import CSSModules from 'react-css-modules'; import styles from './table.css'; class Table extends React.Component { render () { return 
A0
B0
; } } export default CSSModules(Table, styles);

Voici un exemple de modules CSS webpack

En plus de la réponse de Jonathan , voici les événements qui couvrent le focus et les états actifs, et l’utilisation de onMouseEnter au lieu de onMouseEnter car ce dernier ne sera pas mis en bulle si des éléments enfants sont onMouseEnter dans la cible.

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

Vérifiez Typestyle si vous utilisez React avec Typescript.

Voici un exemple de code pour: 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' } } }); 

Hello world

En ce qui concerne les composants stylés et react-router v4, vous pouvez le faire:

 import {NavLink} from 'react-router-dom' const Link = styled(NavLink)` background: blue; &:hover { color: white; } ` ... somewhere 

OnMouseOver et onMouseLeave avec setState semblaient à première vue un peu trop coûteux – mais comme c’est la réaction, cela me semble la solution la plus simple et la plus propre.

Le rendu d’un serveur CSS thing, par exemple, est également une bonne solution et maintient les composants de réaction plus propres.

Si vous n’avez pas besoin d’append des styles dynamics aux éléments (par exemple pour un thème), vous ne devez pas utiliser de styles en ligne, mais plutôt utiliser des classes css.

Ceci est une règle traditionnelle HTML / CSS pour garder HTML / JSX propre et simple.

J’utilise une jolie solution de hack-ish dans l’une de mes applications récentes qui fonctionne pour mes besoins, et je trouve cela plus rapide que d’écrire des fonctions de parameters de survol personnalisé dans js vanilla (bien que je reconnaisse que ce n’est peut-être pas la meilleure pratique dans la plupart des environnements) ..) Alors, au cas où vous seriez toujours intéressé, voilà.

Je crée un élément parent uniquement pour conserver les styles javascript en ligne, puis un enfant avec un className ou un identifiant sur lequel ma feuille de style css va écrire et écrire le style de survol dans mon fichier css dédié. Cela fonctionne car l’élément enfant plus granulaire reçoit les styles js intégrés via l’inheritance, mais ses styles de survol sont remplacés par le fichier css.

Donc, fondamentalement, mon fichier css actuel existe dans le seul but de tenir des effets de vol stationnaire, rien d’autre. Cela le rend assez concis et facile à gérer, et me permet de faire le gros du travail dans mes styles de composants React en ligne.

Voici un exemple:

 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 ( 
{menuOptions.map((page) =>
{page}
)}
); }; ReactDOM.render( , document.getElementById('app') );
 .navBarOption:hover { color: black; } 
   

Cela peut être un bon hack pour avoir un style en ligne dans un composant de réaction (et aussi en utilisant la fonction CSS hover):

...

...

Le moyen le plus simple serait simplement d’append une balise de paragraphe dans votre lien et d’parsingr le style sur le p.

Some text