Il n'y a pas encore beaucoup de "meilleures pratiques". Ceux d'entre nous qui utilisent des styles en ligne, pour les composants React, sont encore très expérimentés.
Il existe un certain nombre d'approches qui varient énormément: Tableau de comparaison de lib de style en ligne React
Tout ou rien?
Ce que nous appelons le «style» comprend en fait plusieurs concepts:
- Disposition - à quoi ressemble un élément / composant par rapport aux autres
- Apparence - les caractéristiques d'un élément / composant
- Comportement et état - à quoi ressemble un élément / composant dans un état donné
Commencez avec les styles d'état
React gère déjà l'état de vos composants, ce qui rend les styles d' état et de comportement parfaitement adaptés à la colocation avec la logique de vos composants.
Au lieu de créer des composants pour effectuer le rendu avec des classes d'état conditionnelles, envisagez d'ajouter directement des styles d'état:
// Typical component with state-classes
<li
className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />
// Using inline-styles for state
<li className='todo-list__item'
style={(item.complete) ? styles.complete : {}} />
Notez que nous utilisons une classe pour styliser l' apparence mais n'utilisons plus de .is-
classe préfixée pour l' état et le comportement .
Nous pouvons utiliser Object.assign
(ES6) ou _.extend
(souligné / lodash) pour ajouter la prise en charge de plusieurs états:
// Supporting multiple-states with inline-styles
<li 'todo-list__item'
style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>
Personnalisation et réutilisabilité
Maintenant que nous l'utilisons, Object.assign
il devient très simple de rendre notre composant réutilisable avec différents styles. Si nous voulons remplacer les styles par défaut, nous pouvons le faire à l'appel site avec des accessoires, comme suit: <TodoItem dueStyle={ fontWeight: "bold" } />
. Implémenté comme ceci:
<li 'todo-list__item'
style={Object.assign({},
item.due && styles.due,
item.due && this.props.dueStyles)}>
Disposition
Personnellement, je ne vois pas de raison impérieuse d'instituer des styles de mise en page. Il existe un certain nombre d'excellents systèmes de mise en page CSS. J'en utiliserais juste un.
Cela dit, n'ajoutez pas de styles de disposition directement à votre composant. Enveloppez vos composants avec des composants de mise en page. Voici un exemple.
// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
className="col-xs-12 col-sm-6 col-md-8"
firstName="Michael"
lastName="Chan" />
// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
<UserBadge
firstName="Michael"
lastName="Chan" />
</div>
Pour la prise en charge de la mise en page, j'essaie souvent de concevoir des composants pour être 100%
width
et height
.
Apparence
Il s'agit du domaine le plus controversé du débat sur le "style en ligne". En fin de compte, c'est au composant que vous concevez et au confort de votre équipe avec JavaScript.
Une chose est sûre, vous aurez besoin de l'aide d'une bibliothèque. Les états du navigateur ( :hover
, :focus
) et les requêtes multimédias sont pénibles dans React brut.
J'aime Radium parce que la syntaxe de ces parties dures est conçue pour modéliser celle de SASS.
Organisation du code
Souvent, vous verrez un objet de style en dehors du module. Pour un composant todo-list, il pourrait ressembler à ceci:
var styles = {
root: {
display: "block"
},
item: {
color: "black"
complete: {
textDecoration: "line-through"
},
due: {
color: "red"
}
},
}
fonctions getter
Ajouter un tas de logique de style à votre modèle peut devenir un peu compliqué (comme vu ci-dessus). J'aime créer des fonctions getter pour calculer des styles:
React.createClass({
getStyles: function () {
return Object.assign(
{},
item.props.complete && styles.complete,
item.props.due && styles.due,
item.props.due && this.props.dueStyles
);
},
render: function () {
return <li style={this.getStyles()}>{this.props.item}</li>
}
});
Regarder plus loin
J'ai discuté de tout cela plus en détail à React Europe plus tôt cette année: les styles en ligne et quand il est préférable de «simplement utiliser CSS» .
Je suis heureux de vous aider au fur et à mesure que vous faites de nouvelles découvertes :) Hit me up -> @chantastic