Step 3

Now that you have your components ready, let's add some style to them. Create a CSS file for each of your components and import them by doing:

/* Title.css */
.Title {
  font-size: 24px;
}

/* ProductList.css */
.ProductList {
  background: white;
}

// Title.js
import './Title.css'

render() {
  return (
    <div className="Title">
      ...
    </div>
  )
}

// ProductList.js
import './ProductList.css'

render() {
  return (
    <table className="ProductList">
      ...
    </table>
  )
}

⚠️ Like for importing JSON, importing a CSS file is made possible because you are using create-react-app. Under the hood, create-react-app has a webpack configuration that allows you to import CSS files.

If you inspect the source of your app, you will see that the CSS is inlined in the page. ⚠️ You are using plain CSS here, it is not CSS modules, so if you use same class names, you will have collision.