web-dev-qa-db-fra.com

Réagissez style pseudo sélecteur en ligne

Selon vous, quels sont les bons moyens de gérer les pseudo-sélecteurs de style avec le style React inline? Quels sont les gains et les inconvénients?

Supposons que vous ayez un fichier styles.js pour chaque composant React. Vous stylisez votre composant avec ce fichier de styles. Mais alors vous voulez faire un effet de survol sur un bouton (ou autre). 

Une solution consiste à créer un fichier CSS global et à gérer les pseudo-sélecteurs de style de cette manière. Ici, la classe 'label-hover' provient d'un fichier CSS global et styles.label provient du fichier de style des composants.

<ControlLabel style={styles.label} className='label-hover'>
    Email
</ControlLabel>

Une autre méthode consiste à attribuer un style aux composants en fonction de certaines conditions (pouvant être déclenchées par un état ou autre). Ici, si l'état survolé est vrai, utilisez styles.button et styles.buttonHover, sinon utilisez simplement styles.button.

<section 
  style={(hovered !== true) ?
     {styles.button} : 
     {...styles.button, ...styles.buttonHover }>
</section>

Les deux approches se sentent un peu hacky. Si quelqu'un a une meilleure approche, j'aimerais bien le savoir. Merci!

cssreactjs
11
Vien Tang

Mon conseil à ceux qui souhaitent utiliser le style en ligne avec React est d’utiliser également Radium .

Il prend en charge :hover, :focus et :active pseudo-sélecteurs avec un effort minimal de votre part

import Radium from 'radium'

const style = {
  color: '#000000'
  ':hover': {
    color: '#ffffff'
  }
};

const MyComponent = () => {
  return (
    <section style={style}>
    </section>
  );
};

const MyStyledComponent = Radium(MyComponent);

Mise à jour du 04/03/2018

Cela a eu quelques critiques positives dernièrement, alors je pense que je devrais le mettre à jour car j'ai cessé d'utiliser Radium. Je ne dis pas que Radium n'est pas encore bon et bon pour faire des sélecteurs psuedo, mais que ce n'est pas la seule option.

Il existe un grand nombre de bibliothèques css-in-js depuis la sortie de Radium qui méritent d’être examinées. Mon choix actuel du groupe est emotion , mais je vous encourage à en essayer quelques-uns et à trouver celui qui vous convient le mieux.

  • émotion - ???? ‍ ???? La prochaine génération de CSS-in-JS
  • fela - Style universel, dynamique et hautes performances en JavaScript
  • styled-jss - Composants stylés sur JSS
  • react-jss - Intégration JSS pour React
  • jss - JSS est un outil de création CSS qui utilise JavaScript comme langage hôte.
  • rockey - Stressless CSS pour les composants utilisant JS. Ecrire des CSS à base de composants avec des mixins fonctionnels.
  • styled-components - Style universel, dynamique et performant en JavaScript
  • aphrodite - Ce sont des styles en ligne, mais ils fonctionnent! Prend également en charge le style via CSS
  • csx - ϟ Une solution CSS-in-JS pour CSS fonctionnel dans des composants d'interface utilisateur fonctionnels
  • styled-jsx - Prise en charge complète de CSS pour JSX sans compromis
  • glam - fou css dans votre js
  • glamour - css dans votre javascript
  • glamour - Le style des composants React est résolu avec une API élégante, un faible encombrement et des performances exceptionnelles (via glamour)
  • styletron - ⚡️ Styles JavaScript universels et performants
  • radium - Ensemble d'outils pour gérer les styles en ligne sur les éléments React.
  • -esthetic - Aesthetic est une bibliothèque React puissante pour le stylage de composants, qu’il s’agisse de CSS-in-JS utilisant des objets, d’importer des feuilles de style ou simplement de référencer des noms de classes externes.
  • j2c - CSS dans la bibliothèque JS, à la fois minuscule et fonctionnel

( La source )

17
Michael Peyper

Y a-t-il une raison pour laquelle vous n'appelez pas les pseudo-sélecteurs avec votre classe label-hover comme ceci? Ou est-ce que je comprends mal votre question?

.label-hover {
   color: orange;
   opacity: 0.5;
}

.label-hover:hover {
   opacity: 1;
}

Vous ne pouvez pas styler de pseudo-sélecteurs avec un style en ligne ( Pseudo-classes CSS avec des styles en ligne ), et je pense que l'utilisation de javascript pour voir si l'élément est survolé est une manière inutilement compliquée et rudimentaire de le faire.

0
user1747330