After using the webpack create-react-app with npx, I encountered an issue with my component styling. Despite having a CSS file named header.css in the src directory alongside Header.js, my component does not seem to be styled correctly. Here is how my component structure looks:
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;
I have tried following advice from various sources, including this thread: CSS modules not working for react version 16.6.0