web-dev-qa-db-fra.com

Comment appliquer les styles CSS et Styling à un composant React

J'ai cherché, cependant, j'ai eu peu de chance de trouver un moyen de styliser le fichier React.js que j'ai créé, je l'ai converti à partir d'une page Web standard. utiliser React pour afficher la page avec le style approprié.

Toute aide serait appréciée!

var NavBar = React.createClass({
  render: function() {
    return (
      /* NavBar */
      <div className="dark_bg_color">
        <img src="logo.png" />
        <div className="table_center">
          <div>
            <ul>
              <li>daily specials</li>
              <li>gift gallery</li>
              <li>events</li>
              <li><i className="fa fa-search" />&nbsp;search</li>
            </ul>
          </div>
        </div>
        <div className="right_nav">
          <div className="table_center">
            <div>
              <button type="button">Sign Up</button>
              <button type="button">Log In</button>
              <div className="vertical-line">&nbsp;</div>
              <button type="button">Cart</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<NavBar />, document.getElementById('nav'));

var Gallery = React.createClass({
  render: function() {
    return (
      /* Gallery */
      <div >
        <div align="middle">
          <div id="head">
            <img id="pic" align="middle" max-width="100%" src="title_pic.png" />
            <div align="left" className="big">
              <div>
                <span>Dine with the Best</span>
                <div className="words">
                  <span>BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Gallery />, document.getElementById("Gallery"));

var WhatsNew = React.createClass({
  render: function() {
    return (
      <div  className="dark_bg_color">
        <h2 style={{marginBottom: 30}}>
          <span>What's New</span>
        </h2>
        <div className="autoplay">
          <img src="whatsnew0.png" />
          <img src="whatsnew1.png" />
          <img src="whatsnew0.png" />
        </div>
      </div>
    );
  }
});
ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew"));

var BonEvents = React.createClass({
  render: function() {
    return (
      /* Events */
      <div id="events" className="dark_bg_color">
        <div className="box">
          <div className="box-text">
            <div className="horizontal-line" />
            <div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div>
            <div className="horizontal-line" />
          </div>
        </div>
        <h2>
          <span>Bon Events</span>
        </h2>
        <div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<BonEvents />, document.getElementById("events"));

var IOS = React.createClass({
  render: function() {
    /* IOS */
    return (
      <div >
        <h2>
          <span />
        </h2>
      </div>
    );
  }
});
ReactDOM.render(<IOS />, document.getElementById("advertiseApp"));

var Footer = React.createClass({
  render: function() {
    return (
      /* Footer */
      <div>
        <div className="footer_center">
          <div>
            <ul>
              <li>ABOUT</li>
              <li>PRESS</li>
              <li>CONTACT</li>
              <li>SUPPORT</li>
              <li>BONAPP FOR RESTAURANTEURS</li>
            </ul>
          </div>
        </div>
        <div className="legal_center">
          <div>
            <ul>
              <li>Copyright © 2016 BonApp Dining Inc.</li>
              <li>Privacy Policy</li>
              <li>Legal</li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Footer />, document.getElementById("footer"));
htmlcssreactjs
33
Jake Orben

Une première lecture de votre question donne à penser que votre CSS existant ne fonctionne pas lorsque vous «réagissez» à votre page Web.

Cela devrait.

Si ce n'est pas le cas, il y a quelque chose d'autre qui nécessite un diagnostic plus approfondi. J'ai récemment réécrit l'un de mes projets dans React et j'ai continué à utiliser exactement le même fichier CSS. Les choses ont bien fonctionné.

Cependant, si vous vous interrogez sur le meilleur moyen de s'y prendre ...

Comme d'autres l'ont dit, React préfère les styles en ligne .

Cependant, je ne le sais pas. C'est compliqué, il peut être difficile de changer et devient difficile à manier.

SCSS ou LESS sont les meilleurs moyens de styliser dans React.

Mais pourquoi? Voici quelques raisons:

Votre CSS est réutilisable

Si vous stylez en ligne avec la méthode React, cela fonctionne excellent pour quelques composants.

Mais lorsque ces composants commencent à s'empiler, vous réalisez que vous utilisez les mêmes styles encore et encore. Ce qui craint.

Il est facile de faire des changements

Lorsqu'un composant a besoin d'un style mis à jour, vous n'avez plus besoin de creuser dans votre code React pour trouver le bon composant (ou était-ce le composant parent?) Et le corriger.

Au lieu de cela, utilisez simplement CSS comme vous l’avez toujours fait.

Vous n'avez pas à vous soucier de l'écriture

Dans la partie en cascade de CSS, les styles inline constituent le point final. Ils écrasent tout.

Au début, cela semble être une excellente solution pour les styles que vous implémentez, et sur un site Web de brochure, tout irait bien. Mais lorsque vous commencez à travailler avec de plus grandes applications, vous rencontrez des problèmes quasiment impossibles à résoudre.

Au lieu de vous battre avec la partie en cascade de CSS, travaillez avec elle et conservez vos styles au même endroit.

Vous utilisez SCSS & LESS Everywhere

Le point le plus important pour moi est que si vous travaillez dans React et que vous préférez les styles en ligne, ils peuvent très bien fonctionner.

Mais que se passe-t-il lorsque vous passez à un autre cadre? Tout à coup, ces styles inline ne fonctionnent pas très bien et vous êtes de nouveau en train d'écrire du CSS "normal" avec le reste d'entre nous. Alors pourquoi changer les choses juste pour un cadre?

Je comprends que si vous travaillez chez React à plein temps et qu’il soit logique d’expérimenter de nouvelles meilleures pratiques, mais pour la plupart d’entre nous, il n’a pas de sens de réinventer la roue lorsque vous ne pouvez l’utiliser que sur un seul modèle. voiture.

28
Caleb Anthony

Si vous voulez garder les choses compartimentées, vous pouvez créer un fichier .scss pour le composant spécifique que vous stylisez puis l'importer dans votre fichier de composant. 

Exemple :

Structure du dossier:

components
|
|--Card
   |
   |--Card.js
   |--Card.scss
   |--index.js
|--Some Other Component Folder

Card.js:

import React, { Component } from 'react';
import classes from './Card.scss';

export class Card extends Component {

    render () {
        return (
            <div className={`${classes.layout} col`}>
                <div className={`${classes.card} card`}>
                    <div className="card-image">
                        <ProviderImage />
                    </div>
                </div>
            </div>
        );
    }
}

export default Card;

Card.scss:

.layout {
    img {
        display: block;
        max-width: 372px;
        max-height: 372px;
        height: auto;
        width: auto;
    }
}

.card {
    width: 370px;
    height: 550px;
}

Cela conserve les styles contenus dans leurs composants respectifs.

10
adriennetacke

Techniquement, vous pouvez ajouter le CSS dans le document HTML <head> comme vous le feriez avec un fichier CSS normal. Tant que vos composants React ont les mêmes classes (sauf évidemment appliqué en tant que className non seulement class), alors cela fonctionnera.

Si vous cherchez quelque chose de plus moderne et orienté Javascript, vous pouvez regarder dans CSS Modules , et en savoir plus à leur sujet ici:

https://css-tricks.com/css-modules-part-1-need/

Il y a évidemment un peu plus de courbe d'apprentissage avec la deuxième approche.

7
Toby

Comme Vijay l'a mentionné, React préfère les styles en ligne .

Un modèle courant consiste pour chaque composant à avoir un seul objet styles contenant tous les styles utilisés dans ce composant, comme suit:

var styles = {
  navBar: {
    backgroundColor: 'dark blue'
  },
  center: {
    textAlign: 'center'
  },
  rightNav: {
  },
  verticalLine: {
  },
};

var NavBar = React.createClass({
  render: function() {
    return (
      <div style={styles.navBar} >
        <img src="logo.png" />
        <div style={styles.center} >
          <div>
            <ul>
              <li>daily specials</li>
              <li>gift gallery</li>
              <li>events</li>
              <li><i className="fa fa-search" />&nbsp;search</li>
            </ul>
          </div>
        </div>
        <div style={styles.rightNav}>
          <div style={styles.center}>
            <div>
              <button type="button">Sign Up</button>
              <button type="button">Log In</button>
              <div style={styles.verticalLine} >&nbsp;</div>
              <button type="button">Cart</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
3
Hamms

Je pense d’abord que vous avez besoin d’importer vos fichiers css ou scss, je vous recommande de le faire directement:

import "components/card/card";

Pour que cela fonctionne, vous devez disposer de chargeurs SASS et de WebPack dans votre projet.

Vous devez avoir des sass loaders dans votre webpack.config

  module: {
    loaders: [
      {test: /\.scss$/, loaders: ["style", "css", "sass"]},
      {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
      {test   : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, loader : 'url?prefix=font/&limit=10000&name=/assets/fonts/[name].[ext]'
      }
    ]

J'ai recoomé utiliser le "sass-loader": "^3.0.0",

Le chargeur nécessite une solution de contournement pour fonctionner avec Windows. Sur mac, cela fonctionne bien:

  • Afficher les fichiers cachés sur l'option de dossier.

  • Allez dans le dossier 'utilisateur/appData', il devrait être sur: C:\Utilisateurs\utilisateur\AppData\Roaming\npm

  • Ajoutez la variable d'environnement Windows: NODE_PATH C:\Utilisateurs\utilisateur\AppData\Roaming\npm\nodeModules

  • Exécutez la commande npm install -g

  • Fermez et rouvrez l'invite de commande.

Avec cela, vous pouvez charger sass et le compiler avec webpack, et je recommande de l’utiliser avec react, c’est vraiment puissant.

Si vous ne l'utilisez pas, vous pouvez trouver plus d'informations ici: http://webpack.github.io/docs/tutorials/getting-started/

Et ici, vous pouvez vérifier et donner un exemple du processus de construction de Webpack: Pourquoi mon webpack bundle.js et vendor.bundle.js sont-ils si gros?

1
Vinicius Vieira

Sass vous permettra d'imbriquer vos sélecteurs CSS d'une manière qui suit le même hiérarchie visuelle de votre code HTML. Sachez que des règles trop imbriquées entraînera une CSS sur-qualifiée qui pourrait s’avérer difficile à maintenir et est généralement considéré comme une mauvaise pratique. Laissez-moi expliquer avec un Exemple.

Hero.jsx 

import "./Hero.scss";

import React, { Component } from "react";

class Hero extends Component {
  render() {
    return (
      <div className="hero-component">
        <span className="hero-header">Scss is awsome.</span>
      </div>
    );
  }
}

export default Hero;

Hero.scss 

.hero-component {
    .hero-header {
        <!-- Hero header style goes here -->
    }

    .other-class {}
}
1
Anoop M

J'utilise Sass (.scss) pour styliser mes composants React. J'ai aussi utilisé PostCSS. Et ils sont aussi modularisés. Une fois que vous l'avez configurée via votre flux de travail (j'utilise Webpack), tout ce que vous avez à faire pour styler votre application React consiste à importer le style.scss (oui, .scss) qui contient vos partiels importés, etc., dans votre fichier index.js qui se trouve dans la racine. avec votre App.js principal. C'est là que tout ce dont vous avez besoin pour faire fonctionner votre application réside également. Par exemple, voici à quoi ressemble le mien pour l'application React sur laquelle je travaille actuellement:

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import 'core-js/es6/map';
import 'core-js/es6/set';
import App from './App';
import './favicon.ico';
import './style/style.scss';

ReactDOM.render(
    <App />, document.getElementById('root')
);
0
Maria Campbell