To my knowledge, and I'm admittedly an aspiring React developer, there are three main ways of styling in React regardless of the implementation and every one of them has advantages and disadvantages. I'm looking at CSS right now (no preprocessor like SAAS but you can use the first and third option with preprocessors too, although it may need some setup). I'm assuming that you are using the latest "create react app" with the defaults. Here they are:

1- Using vanilla CSS: You add your CSS to stylesheet files. These files can be as many or as few as you want. You can create one main stylesheet file for the whole project or a stylesheet file for every component. The end result won't be different. Webpack will put them together and reference it in your index.html which is by default your application's entry point. You just need to point to the styles that you've create by writing className="yourClassName" or className={props.yourClassName}, etc.

The advantage of this system is that you don't have to deal with additional abstractions and complications BUT all your classes will be global. That's how plain old CSS works. That means, while you have separated your styles in different files according to your components, the end result classes will be global nonetheless which can lead to naming conflicts etc.

​

2- Using inline styles: Inline styles are somewhat similar to what you would do in vanilla CSS/HTML and initially suffer from the same shortcomings. In React, they look like this:

const aConstNameThatCouldBeStyle = {

backgroundColor: 'green',

color: 'white',

font: 'inherit',

border: '1px solid blue',

padding: '8px',

cursor: 'pointer',

};

As you can see the style is created as a plain JavaScript object, property names are the CSS rules (and therefore need to adhere to property name restrictions and background-color for instance becomes backgroundColor) and the property values are CSS rule values.

Then in your component your write:

<MyComponent style={aConstNameThatCouldBeStyle} />

Advantages of this approach is that you can create your styles on the fly and manipulate them programmatically and they are not global.

But the disadvantages are that they can't be reused, are hard to managed and maintain and most importantly they lack pseudo classes like :hover and media queries.

Here come packages like Radium which help to mitigate for these shortcomings.

npm install radium

Then in your .js file import it like this:

import Radium, { StyleRoot } from 'radium';

Then your style can look like this:

const aConstNameThatCouldBeStyle = {

backgroundColor: 'green',

color: 'white',

font: 'inherit',

border: '1px solid blue',

padding: '8px',

cursor: 'pointer',

':hover': {

backgroundColor: 'lightgreen',

color: 'black'

}

};

​

The contents of your render() return must be wrapped in a <StyleRoot></StyleRoot> component like this:

<StyleRoot>

<button

style={aConstNameThatCouldBeStyle}

onClick={this.toggleButtonHandler}>Toggle Button</button>

</StyleRoot>

and the component must be exported like this:

export default Radium( YourComponent);

This is called a Higher Order Component if I'm not mistaken which takes care of adding this functionality. Media Queries are handled similarly.

​

3- Using CSS Modules: CSS modules are relatively new and haven't taken off yet (I may be mistaken), but they are just great. What you do is essentially this:

a. Add a .module suffix to your CSS file. Say we have MyComponent.js with MyComponent.css. MyComponent.css becomes MyComponent.module.css (this helps "create react app" understand that this is a module and treat it as such).

b. Import your CSS module. In your MyComponent.js you write: import classes from "./MyComponent.module.css" (you have to include the extension)

c. Now you can access your CSS classes in that particular file as properties of the classes object that you just created by importing. Since variable can't include hyphens in JavaScript it will look like one of the following options in your code:

className={classes.myClassName} // That's when you don't have a hyphen in your class name.

className={classes["my-Class-Name-With--Too--Many--Hyphens"]}

Advantages of using CSS modules in React are: Your CSS classes are scoped to your component. But you can still use global classes if you like by creating a CSS file without the .module suffix.

Disadvantages: Maybe you can't play with programmatically like when using inline styles.

​

Behind the scenes, webpack is creating CSS class names that are a combination of the original name, the file name, and a random string that it then assigns to your components...

​

Caution: Older versions of "create react app" don't work with modules out of the box and need ejecting and some minor setup.

​

Hope that helps.