React Component Not Picking up CSS file

Question

I used the webpack create-react-app with npx. I have a component I saved in the src directory, header.css, and Header.js. It seems that the css file is not working as intended, it is not styling my component. I have the following component structure.

header.css:

.header {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    padding: 1em;
    margin-bottom: 2em;
    background-color: rgb(192,45,26);
    color: #fff;
}

Header.js:

import React from 'react';
import './header.css';


function Header() 
{
    
        return (
            <div>
                <h1>VACCINE</h1>
            </div>
        );
    
}

export default Header;

Any help would be appreciated, I followed the following thread but it didn't seem to work:

CSS modules not working for react version 16.6.0

You're currently not using the css class. Did you mean <div className="header">? — Nicholas Tower
– Nicholas Tower, Commented Aug 16, 2021 at 14:04

silencedogood · Accepted Answer · 2021-08-16 14:06:23Z

3

You've successfully imported the css file, which is step 1. Step 2 is actually using the styles found within. Just apply a class to your div header:

import React from 'react';
import './header.css';


function Header() 
{

    return (
        <div className="header">
            <h1>VACCINE</h1>
        </div>
    );

}

export default Header;

answered Aug 16, 2021 at 14:06

silencedogood

3,3191 gold badge16 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

React Component Not Picking up CSS file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related