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;

Make sure you have export default Layout from Layout function — Alamin
– Alamin, Commented Feb 15, 2021 at 5:03
@Sheikh It's a css file, not a JS file. There is nothing to export. — codemonkey
– codemonkey, Commented Feb 15, 2021 at 5:10

codemonkey · Accepted Answer · 2021-02-15 05:10:30Z

3

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/

edited Feb 15, 2021 at 5:10

answered Feb 15, 2021 at 4:58

codemonkey

7,9755 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jason Todd Over a year ago

Thank you! How come the tutorial I am following showed me this "classes" way? I am wondering was there something I was missing?

codemonkey Over a year ago

@JasonTodd Well that's an excellent question. If the tutorial showed you the modular approach of importing css, then it sure should have pointed out the naming conventions for the css files. But frankly, I have always thought importing css directly as in import 'cssfile.css'; make more sense and accomplishes the same exact thing.

Jason Todd Over a year ago

The create-react-app doc you linked worked well too. But I am still wondering how the instructor in the video did it without using [filename].[module].css format... still confused but at least its working now.

Collectives™ on Stack Overflow

react css class not applying

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related