CODEWITHSUNDEEP
cssreactjs
user5019516
user5019516

Reputation:

React Component Not Picking up CSS file

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

Upvotes: 0

Views: 711

Answers (1)

silencedogood
silencedogood

Reputation: 3299

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;

Upvotes: 3

Related Questions