CSS for ReactJS - Referencing a div works fine, referencing a className does not

Question

My CSS files work fine when I just use the element names like this:

div {
  background-color: blue;
}

But when I use className to identify that div, the CSS is ignored, like this:

.containerInner {
  background-color: blue;
}

Here is the js file, so you can see how I'm using className:

import React, { Component } from 'react'
import styles from './Game.css'
import GameContainer from './GameContainer/GameContainer.js'

class Game extends React.Component {

render() {
  return (
    <div className={styles.containerOuter}>
        <div className={styles.containerInner}>
            <h1 className={styles.header}>MEMORY</h1>
            <GameContainer />
        </div>
    </div>
  )
}
}

export default Game

Notes:
1. I am using create-react-app.
2. I am not using modular css like sass. I'm just using raw css.
3. This is a problem throughout my entire project, not just a couple files
4. There are no error messages in Chrome, or in the terminal

This is the same issue on Stack Overflow, but it does not appear to have been resolved on the thread, and the comments did not lead me to a solution. CSS class selector styles not being applied in React Project

Any ideas? Thanks in advance

Answer 1

If you want to apply a class name to a class, just apply the name. Class names are strings, not objects;

<div className="containerInner">