Styling in React

Styling in React

Now that we have started using React how are we supposed to style all those awesome components that we have been making. There are a couple of ways.

1) Traditional CSS in Header

Besides the need to use className instead of class you could just make a css file in public and import into your index.html

It would behave the same although it would not be very reusable

2) CSS Preprocessor

Create React App has tools built in that allow you to import CSS so we could import are CSS in our App.js and have it cascaded to all other components. Like so:

File Structure

src/  
  |_ Box.js
  |_ App.js
  |_ index.js

CSS

/* ./index.css */
.container {
  background-color: black
}

.box {
  width: 250px;
  height: 250px;
  margin: 50px auto;
}


.red {
  background-color: #EF5350;
}

React

// ./Box.js
import React from "react";

class Box extends React.Component {
  render() {
    return (
      <div className="box red">
      <div>
    )
  }
}

export default Box;

// ./App.js
import React from "react";

import Box from "./Box.js
import "./index.css";

class App extends React.Component {
  render() {
    return (
      <div className="container">
         <Box />
         <Box />
      </div>
    )
  }
}

export default App;

3) CSS Modules

A css module is a CSS File in which all CSS is scoped locally by default. Meaning that every component gets its own CSS file with its own styles. Like so:

File Structure

src/  
  |_ Box/
    |_index.js
    |_Box.css
  |_ App.js
  |_ App.css
  |_ index.js

CSS

/* ./App.css */
.container {
  background-color: black
}

/* ./Box/Box.css */
.box {
  width: 250px;
  height: 250px;
  margin: 50px auto;
}

.red {
  background-color: #EF5350;
}

React

// ./Box/index.js
import React from "react";

import styles from "./Box.css";

class Box extends React.Component {
  render() {
    return (
      <div className={[styles.box, styles.red]}>
      <div>
    )
  }
}

export default Box;

// ./App.js
import React from "react";

import Box from "./Box/Box.js"

import styles from "./App.css";

class App extends React.Component {
  render() {
    return (
    <div className={styles.container}>
      <Box />
      <Box />
    </div>
    )
  }
}

export default App;

To use CSS modules requires some modifications to your babel file. For more check out https://medium.com/nulogy/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2

4) Styled Components

Styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS

We won't be using it in class so I won't go in-depth here but if you would like here is a link to the styled-components library and a tutorial on how to use it.

Libary: https://github.com/styled-components/styled-components

Tutorial: https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55

What will we use in class?

Because we want to prepare you for the widest range of jobs we won't be using styled components. So in this class, we will a mix of directly importing a css file and css modules.