Adding CSS to react Component

Question

I'm trying to add css to my newly created component. When I use inline styles it works. But when I try to import css from another separate file it doesn't work. Below I mention my 2 files.

Layouts.css

.Content {
    margin-top: 16px;
}

Layouts.js

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

const Layout = (props) => (
    <Auxillary>
        <div>
            Toolbar,Sidebar,Backdrop
        </div>
        <main className={classes.Content}>
           {props.children}
        </main>
    </Auxillary>
);
    
export default Layout;

How are you building your app? Static assets (like css) need to be run through an asset bundler like Webpack in order to use them. Alternatively, you can use jss or something like that — katamaster818
– katamaster818, Commented Oct 22, 2020 at 19:37
I don't think you need a named import just import './Layouts.css' — Ale Plo
– Ale Plo, Commented Oct 22, 2020 at 19:38

joshpetit · Accepted Answer · 2020-10-22 19:36:11Z

1

Have you tried making className='Content'

answered Oct 22, 2020 at 19:36

joshpetit

9398 silver badges25 bronze badges

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

1 Comment

joshpetit Over a year ago

if it worked for you don't forget to mark it as a solution. Here is a source for the solution also.

Andrej Kitanović · Accepted Answer · 2020-10-22 23:39:25Z

0

If you want to use classes.Content you must name your Layout css file like this

Layouts.module.css

answered Oct 22, 2020 at 23:39

Andrej Kitanović

1073 bronze badges

Collectives™ on Stack Overflow

Adding CSS to react Component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related