React : CSS class name import not working

Question

i have a <main> div in my react component and im importing some class name from a class css file, but the class name is not getting integrated to the main div when i try to inspect it in the browser. when i simply use other class names its working like <main className="test"> but importing classes is not working.

This is my component :

import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css';

const layout = (props) => (
<Aux>
    <div>
        Test paragraph
    </div>
    <main className={classes.Content}>
        {props.children}

    </main>
</Aux>
);

export default layout;

This is my css

.Content{
   color: red;
   margin-top: 20px;
}

I did npm run eject command after creation, if there is something to do with the webpack configuration file please help me ( i haven't made any changes there after eject command )

Here is the css part of webpack dev config file

{
        test: cssRegex,
        exclude: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
        }),
      },
      // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
      // using the extension .module.css
      {
        test: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        }),
 },

Answer 1

import './Layout.css';

Then use it like a normal CSS

<main className="Content">

You can also use your classes as objects with this format:

In your CSS file:
Wrap your classes and id's with :local(.className)

Example
:local(.Content) { width: 100px; }

In your React Component:
import classes from './stylesheet.css'

<div className={classes.Content}></div>