How to apply CSS and Styling to a React component

Question

I have been looking, however, I have had little luck finding any way to style the React.js file that I have created, I converted it from a standard web page, so I have the o

Answer 1

As Vijay mentioned, React prefers inline styles.

One common pattern is for each Component to have a single styles object that contains all the styles used in that Component, like so:

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>
    );
  }
});

Answer 2

I think first of all you need to import your css or scss files, i recommend doing it to the direct path like:

import "components/card/card";

In order for this to work you need to have SASS loaders and webpack running in your project.

You need to have sass loaders in your 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]'
      }
    ]

I recoomed use the "sass-loader": "^3.0.0",

The loader needs a workaround to work with windows, on mac it works fine:

• Display hidden files on folder option.

• Go to the folder 'user/appData', it should be on: C:\Users\user\AppData\Roaming\npm

• Add the windows enviroment variable:NODE_PATH C:\Users\user\AppData\Roaming\npm\nodeModules

• Run the command npm install -g

• Close and reopen the command prompt.

With this you can load sass and compile it with webpack, and I do recomend using it with react, it's really powerfull.

If your not usng webpack you can find more here: http://webpack.github.io/docs/tutorials/getting-started/

And here you can check and example of webpack build process: Why is my webpack bundle.js and vendor.bundle.js so incredibly big?

Answer 3

I use Sass (.scss) to style my React components. I have also used PostCSS. And they are also modularized. Once you have it set up via your workflow (I use webpack), all you need to do to style your React app is to import the style.scss (yes, .scss) which contains your imported partials etc into your index.js file which resides in root along with your main App.js. That's where everything else you need in order to make your app work resides as well. For example, this is what mine looks like for the React app I am working on now:

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')
);

Answer 4

If you want to keep things compartmentalized, you could create a .scss file for the specific component you are styling then import it in your component file.

Example:

Folder Structure:

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;
}

This keeps the styles contained to its respective component.

Answer 5

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. Let me explain with an example.

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 {}
}

Answer 6

Technically you can add the CSS in the HTML document <head> as you would with a normal CSS file. So long as your React components have the same classes (except obviously applied as className no just class) then it will work.

If you're looking for something more modern and Javascript-oriented, you can look into CSS Modules, and read more about them here:

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

There's obviously a bit more of a learning curve with the second approach though.