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!
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);
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.
( La source )
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.