in react 16.13 and [email protected] and higher you don't need to eject your project. Your CSS files must be named camelCase + .modules.css and import to your projects like this:

import React, { Component } from 'react';
import styles from './app.module.css'; // Import css modules stylesheet as styles
class App extends Component {
  render() {
    return <button className={styles.test}>Error Button</button>;
  }
}
export default App;

and in app.module.css

.test{
  color: blue;
}

if you eject projects, in webpack.config.js file, in css modules change like this:

   test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,

The mistake you are doing here is your are calling your css with a name

Example:

import classes from "./BurgerIngredients.css";

And then you are using inline to append the class name like this

Example:

 <div className={classes.Meat}></div>;

Your css class names are not object so you cannot call it like this.

Instead all you have to do is just import the css like this (Make sure css file is in the same folder as the js file because here we are calling the file by ./ )

Example:

 import "./BurgerIngredients.css";

And use the className just like you would do in a normal html like this

Example:

 <div className="BreadBottom"></div>;

In order for react to understand your css file is a css-module, you need to add the suffix .module to the file name while using a react-script version newer than 2.0.0.

Simply rename addTask.css to addTask.module.css and change the import to:

import styles from './addTask.module.css'