Styling

style sheet

It's the most common way. But it's hard to change the style dynamically.

Button.js

.Button {
  padding: 20px;
}

Button.js (v1)

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

CSS Module (personnal favorite)

In JavaScript file, Read the css from style sheet

This project supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]\_[classname]\_\_[hash].

Button.module.css

MUST name the file ended by .module.css

.Error {
  background-color: red;
}

Button.js (v2)

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.Error}>Error Button</button>;
  }
}

redium

npm install --save radium

Radium can manipulate Media Queries, Pseudo selectors, ...

To use it:

import Radium from 'redium';

export default Radium(MyComponent);

Pseudo selectors:

const MyComponent = props => {
    const style = {
        ':hover': {
            backgroundColor: 'red'
        }
    };

    return (
        <div>
            // something
        </div>
    )
}

Media Queries

const MyComponent = props => {
    const style = {
        '@media(min-width: 500px)': {
            width: '450px'
        }
    };

    return (
        <StyleRoot>
            <div>
                // something
            </div>
        </StyleRoot>
    );

}

styled components

npm install --save styled-components

To use it:

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;

  &:hover {
      backgroundColor: red
  }
`;

render(
    <Title>
        Hello World!
    </Title>
);