How do I set CSS Modules on React?

Question

I want to set css-modules for the first time on a React study project.

I have learned that on react-app +2 I do not need to eject in order to get css-modules running. I have tried learning the process in this link with no success, as the css-modules set up have disappeared from the docs.

I have created a react project using webstorm. I cannot locate my webpack.config.js file as well.

Could anymore please explain how do I make this work on my project please?

I have tried the following:

App.js file

import React, {Component} from 'react';
import classes from './App.css';
import UserOutput from './Components/UserOutput/userOutput'

//...code in between

 return (
            <div className={classes.App}> //I have tested this, but it does not work
                <h1>This is a ReactJs exercise App!</h1>
                <h2 className={assignedClasses.join(' ')}>Cool Cards are being displayed below</h2>
                {types}
                <br/>
                <button className={btnClasses.join(' ')} onClick={this.hideComponentHandler}>V-if in React</button>
            </div>
        )

App.css file

.App {
  margin: 10px;
  padding: 10px;
  text-align: center;
}

Answer 1

Try changing the filename from App.css to App.module.css