2017-02-15 2 views
1

Je fais des recherches pour un grand projet qui utilisera reactJs et tous les éléments html seront convertis en composants React.Styling ReactJs Component Options

Comme nous le savons tous, css a un gros problème avec les globals, donc il y a beaucoup de possibilités de conflits CSS.

Il y a beaucoup d'options différentes pour ce dont:

  • Conception atomique

  • SMACSS

  • OOCSS

ou en utilisant les bibliothèques comme:

  • Radium

  • React style

  • React Inline

  • jsxstyle

  • React JSS

  • React Inline CSS

  • React Regardez

  • React Styles Statics

Tous ces éléments ont quelque chose de bien, mais en même temps, tous sont en cours d'expérimentation et des choses manquantes. En d'autres termes, aucun d'entre eux ne résout tous les problèmes de css dans le style de composant de réaction ou certains essayent juste de résoudre un problème qui n'existe pas. Après avoir essayé tous, je suis à mi-chemin de penser que je devrais simplement créer un lien vers des fichiers css de styles courants et avoir un fichier css spécifique à chaque composant et cibler ce fichier css depuis le composant. Est-ce que quelqu'un ici a eu de l'expérience dans le style des composants de réaction dans un grand projet et avez-vous des commentaires ou suggestions?

Je ne peux tout simplement pas me décider en utilisant simplement css ou javascript pour cela.

Y at-il quelque chose que j'ai manqué à la recherche?

+0

J'aime utiliser du radium avec un vieux bootstrap uni. Laissez le framework css prendre soin de la mise en page pour vous, mais être capable de vraiment composer des styles avec OOP * sans * une construction css séparée est génial. fonctionne très bien avec 'PropTypes', c'est-à-dire qu'un composant de bouton * devrait avoir une couleur d'erreur associée. –

Répondre

1

Il n'y a rien de mal à inclure CSS avec votre solution, SASS et LESS sont géniaux. Cependant, j'aime personnellement les styles en ligne a comme un objet JS, car il vous donne toute la puissance de JS, donc vous pouvez être aussi dynamique que vous voulez, faire les calculs tous les calculs dont vous avez besoin sans pré-traitement css , etc...

L'équipe React investit dans ce pendant un certain temps (React natif utilise déjà cette fonction par défaut) voici un à React Native Styles, et un Presentation from a Facebook engineer, et un Proposal from the reactjs/react-future repo, et il y a de belles bibliothèques comme Radium qui vous aide beaucoup.

CSS dans JS s'améliore sûrement chaque jour, alors oui, je vous conseillerais de faire ce saut. :)

+0

Ouais j'ai vu ces présentations et bien sûr vous devez ajouter encore une autre bibliothèque (Radium) pour faire: hover etc ... Radium ne fait que trier une partie du problème ... pas encore convaincu – PaulTenna2000

+0

Ouais, est une question de préférence en ce moment (sauf si vous faites React Native). Je vous conseille de l'essayer plus en profondeur, si vous n'êtes toujours pas convaincu, alors il n'y a rien de mal à continuer à utiliser CSS. :) –