react css class not applying

Question

I am trying apply a margin-top as a CSS class to my beginner react-project. However, the margin is not applying. Wondering if someone can clarify if something is wrong? I used create-react-app to create and in the package.json file, it says my react-scripts is 4.0.2 so I believe this is supported. Just not sure what I am doing wrong.Every content that is in a div, p-tags , etc are displaying fine. I just can't get the classes to apply.

.Content {
    margin-top: 16px;
}

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

const layout = (props) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main className={classes.Content}>
            {props.children}
        </main>
    </Aux>   
);

export default layout;

Answer 1

Change this:

import classes from './Layout.css';

To

import './Layout.css';

Then change this:

<main className={classes.Content}>

to

<main className={"Content"}>

---

If you're bent on importing your css file like so:

import classes from './Layout.css';

Change your CSS file name to ./layout.module.css, then import it this way:

import classes from './layout.module.css';

And only then can you access css class names using:

classes.Content

More on file naming conventions here: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/