Issue with CSS File not being recognized by React Component

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

Answer №1

First things first, you've successfully brought in the css file in step 1. Now onto step 2 where we put those styles to use. Simply assign a class to your div header:

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


function Header() 
{

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

}

export default Header;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to prevent ng-bootstrap modal from automatically centering the content within the modal?

Looking for a solution to a UX issue with my Angular ng-bootstrap modal. The problem arises when displaying messages of varying lengths - if the message is longer than the screen's vertical resolution, it gets centered on the screen. This causes incon ...

Tips for retrieving and presenting information from a JSON document in a React TypeScript application

I am struggling to display data in a list format using TypeScript. I am able to fetch the data but unable to display it properly. I am currently using map to iterate through an array of JSON objects. //json file [ { "id": "6s", ...

I must remove the thumb from the input range control

I am looking for a way to remove the thumb from the progress bar in my music player. I have tried various methods without success, and I simply want the progress bar to move forward with color change as it advances based on the Progress variable. For refe ...

Enhancing State in React and Redux Saga with the Addition of New Objects

I have data structured like this. export const initialSettings = { id: '01', name: '', lat: '', long: '', adressLine1: '', adressLine2: '', city: '', state: '&apo ...

When the web browser page is zoomed out (Ctrl -), elements do not appear to float

Can you test resizing the window to the minimum (CTRL-)? Here's the link: http://jsfiddle.net/Zty9k/13/ This is the HTML code: <ul> <li><img src="http://i.imgur.com/PBuDAFH.gif"></li> <li><img src="http://i.i ...

Having trouble getting CSS styles to work properly in conjunction with Javascript code

Currently, I am developing a feature on a canvas that covers the entire webpage's width and length. In this canvas, I have the ability to create boxes by clicking down anywhere on the canvas, dragging my mouse in any direction, and upon releasing the ...

Loading a Next.js and Three.js model (gltf model) twice consecutively

Using Chakra-UI with next-js I want to load the model only once. I have checked the code multiple times but couldn't find the error causing this issue. Can someone help me identify the mistake in the code and explain why this is happening? index.j ...

Guide on utilizing popup box input to amend CSS (background color)

I'm looking for some guidance on JavaScript and CSS. Is there a way to create a popup box where users can input a color (any main primary color recognized by CSS) and then have the background color of the page change accordingly in an external styles ...

Struggling to create a basic website design using Flex within Bootstrap 5

As a newcomer to Bootstrap and web development, I am eager to create a simple welcome-page with a specific design in mind. The layout should resemble the image found https://i.sstatic.net/AAEQ4.png. The colors in the image indicate where flex rows could b ...

Encountering an unusual hash code when implementing Google Tag Manager in a Next.js project was

I am currently using Next.js and have added Google Tag Manager through a script <script dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var ...

Choose different components that possess the X designation

Can X number of elements (h1, p, span...) be modified only if they have a specific class? I'm searching for a solution like this: (elem1, elem2, elem3, elem4).class { /* add customization here */ } I previously attempted using parentheses, curly b ...

Stopping video playback when hovering over it

Can anyone help me modify this code so that a video plays only when hovering over it, and stops playing once the hover ends? What changes should I make to the JavaScript portion of the code for this functionality? <div class="padding-box height-40"&g ...

Is there a way to modify a specific item within a useState Array in Reactjs?

Having a useState hook that stores data in the following structure: const [orderData, setOrderData] = useState({ demoData1: '', demoData2: '', demoData3: '', demoArrayData: [{itemName: '', itemNumber: ...

Create a div that pops up when clicked, just like the Fancybox jQuery feature

I'm looking to create a popup div with an elastic effect similar to jQuery's fancybox. I've tried using the following code, but it doesn't seem to work... Here is the HTML: <a href="#" id="LoginAnchorLink">ClickME</a> < ...

Are the site-wide navigation links working on one page but not the other?

Currently, I am in the process of constructing a website on rails and have successfully integrated a site-wide navigation bar to display on all pages. However, an issue has arisen where the navbar is visible on both pages, yet the links and hover effects a ...

Adjusting the dimensions of a button: What to expect

I'm currently working on a toggle switch that I want to make responsive for future resizing. The toggle switch includes a red square (for demonstration purposes), but I've encountered an issue where the red square stretches and changes its dimens ...

Struggling to synchronize the newly updated Products List array in zustand?

Let me clarify the scenario I am dealing with so you can grasp it better. I have a Cart and various Products. When a user adds the product (product_id = 1) twice to the cart with the same options (red, xl), I increase the quantity of that item. However, i ...

How can you customize the color of the arrows in Carousel Bootstrap?

I've utilized Carousel Bootstrap to create a slideshow, but I'm struggling with changing the color of the arrows. Could you please assist me in figuring out how to change the color of the arrows? Thank you! slideshow.component.html: <di ...

Guide to embedding an iframe generated with JavaScript into a React component

I'm currently working on developing an app that will utilize an iframe. The goal is to have controllers in place to adjust the style of the iframe and add text to it, essentially creating a preview function. I've been attempting to use Javascript ...

Launching React app on local server at localhost/appname

issue after deploying to gh-pages Upon deploying my application to gh-pages, it does not launch with the usual http://localhost:3000. Instead, it opens at http://localhost:3000/appname and I am unable to view any data on my app either locally or on th ...