Why are styles not working in React?

Question

css

I do everything as in the book and it seems to have an error and does not apply styles (import is connected)
, here is the TodoList.js code:

import React, { Component } from "react";
import TodoItems from "./TodoItems";
import "./TodoList.css";


class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: []
        };

        this.addItem = this.addItem.bind(this);
    }
    addItem(e) {

          var itemArray = this.state.items;
          if (this._inputElement.value !== "") {
              itemArray.unshift({
                  text: this._inputElement.value,
                  key: Date.now()
              });
              
              this.setState({
                  items: itemArray
              });
              
              this._inputElement.value = "";
          }
          
          console.log(itemArray);
          
          e.preventDefault();

    }

    render() {
        return (
            <div className="todoListMain">
                <div className="header">
                    <form onSubmit={this.addItem}>
                        <input className="input" ref={(a) => this._inputElement = a}
                            placeholder="введите задачу">
                        </input>
                        <button type="submit">ok</button>
                    </form>
                </div>
                <TodoItems entries={this.state.items}/>
            </div>
        );
    }
}
export default TodoList;

-------------------------------------------------- ------------------------------------
And here is the TodoList.css code

.todoListMain.header input {
        padding: 10px;
        font-size: 16px;
        border: 2px solid #FFF;
        width: 165px;
    }
    
    .todoListMain.header button {
        padding: 10px;
        font-size: 16px;
        margin: 10px;
        margin-right: 0px;
        background-color: #0066FF;
        color: #FFF;
        border: 2px solid #0066FF;
    }
    
    .todoListMain.header button:hover {
        background-color: #003399;
        border: 2px solid #003399;
        cursor: pointer;
    }
    
    .todoListMain.theList {
        list-style: none;
        padding-left: 0;
        width: 250px;
    }
    
    .todoListMain.theList li {
        color: #333;
        background-color: rgba(255, 255, 255, .5);
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 5px;
    }

Answer 1

<div className="todoListMain">
    <div className="header">

.todoListMain.header input {

This is some incredible disgrace, for which there is no excuse. The space between .todoListMainand .headerwhere did you get lost? Well, the cant is the same with other styles.