The styles in the CSS file are not behaving as expected

Having an issue with my CSS file for the Header.js module. Despite writing rules, only one style is applying. Can anyone help me identify the problem? Thanks in advance!

Header.js component

import React from 'react';
import '../../../asset/css/updated/header.module.css'

const Header = () => {
    return (
        <div className='header-container'>
            <h1 className='header-title'>Some text here</h1>
            <svg width="130%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150"><defs><linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%"><stop offset="5%" stop-color="#56b5e3"></stop><stop offset="95%" stop-color="#7d58a5"></stop></linearGradient></defs><path d="M 0,700 C 0,700 0,350 0,350 C 136.8,427.20000000000005 273.6,504.40000000000003 456,480 C 638.4,455.59999999999997 866.4000000000001,329.6 1038,291 C 1209.6,252.4 1324.8,301.2 1440,350 C 1440,350 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity=".9" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 350)"></path></svg>
        </div>
    );
};

export default Header;

header.module.css file

path{
    fill:url(#gradient) !important;
}
.header-container{
    position: relative;
}
.header-title{
    position: absolute;
    color: white;
    margin-top: 10px;
    margin-left: 10px;
}
cssreactjs

Answer №1

It's recommended to import and utilize your CSS module stylesheet in the following manner:

import React from 'react';
import style from '../../../asset/css/updated/header.module.css'

const Header = () => {
    return (
        <div className={style.header-container}>
            <h1 className={style.header-title}>Insert text here</h1>
            ...
        </div>
    );
};

export default Header;

Answer №2

It's important to note how you can import CSS files in your project. You have two options:

import '../../../asset/css/updated/header.css'

If you choose not to use modules, or

import css from '../../../asset/css/updated/header.module.css';

If you want to use CSS modules. Afterwards, you can utilize it in your code like this:

<div className={css.header-container}>
  <h1 className={css.header-title}>Some text here</h1>
  <svg></svg>
</div>

Answer №3

As stated in the official documentation for React, it is recommended to utilize header.module.css styles within curly braces. Therefore, the CSS file should be imported as 

import styles from './header.module.css';
and the class should be used as className={style.header-container}

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

Modifying properties of an array object using React hooks

Is there a way to toggle the boolean property for all objects using the React useState hook? const [showCard, setShowCard] = useState([ { id: 1, show: true }, { id: 2, show: true } ]); ...

reactjsreact-hooks

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...

cssreactjsmaterial-ui

There is an issue with types in React when using TypeScript: The type '(user: User) => Element' cannot be assigned to the type '((props: User) => any) & ReactNode'

I'm encountering an error in the terminal and need some assistance. I am not well-versed in TypeScript, so any guidance to resolve this issue would be highly appreciated. https://i.stack.imgur.com/PWATV.png The Loadable component code: import { Circ ...

reactjstypescriptmaterial-ui

When using the `position: absolute` and `left: 50%` properties on content with a `width: fit-content`, the content gets wrapped in Windows,

Why does the below code behave differently on Windows and Mac? On Windows, the content wraps or the div occupies only 50% of the browser's width, causing the content to wrap if its width exceeds 50% of the browser's width. However, on Mac, it tri ...

csswindowsmacos

Is there a way to occupy the extra space while working with an inline unordered list?

Using this unique CSS code, I've managed to give my unordered lists a touch of elegance: ul, li { padding: 0px; margin-left: 0px; margin-bottom: 0px; display: inline; } li { border: solid 1px #333333; margin-right: 5px; padding: 2p ...

htmlcss

Set up Amplify to utilize a pre-existing Cognito token for authentication

I have a project where I am utilizing Amplify (JS) Storage to upload files to an S3 bucket. The setup is already completed and working smoothly, but now I need to add an extra layer of security by implementing a policy that restricts file uploads to only ...

reactjsaws-amplifyamplifyjs

HTML div ID displaying incorrectly

My main div on the page has the attribute align="center", but it does not seem to align in the center. If you'd like to see the page for reference, click here. This is the CSS: #page{ background-color: #4C1B1B; width:85%; height:500px; ...

csshtmlalignment

Components drifting apart following viewport adjustments

Can someone help me with this issue in responsiveness? When I change the viewport, my header and main elements seem to be moving far apart from each other. View the code on JSFiddle <header> <div class="slider"> <img src="picture1" al ...

htmlcssresponsiveelement

Retrieve all HTML dependencies, such as JavaScript and CSS files, using the same method as a web browser

I am currently working on a Single Page Application (SPA). My main objective is to evaluate the performance of the application using . Given that the application is an SPA, I want to simulate a scenario where all static content is loaded when a user firs ...

javascripthtmlcss

Using ReactJS to dynamically load data based on the previously loaded data

On my ReactJS page, I am using axios to fetch a list of IDs and image URLs from an API, storing this data in the component's state. For example: [ {id: 21321321, img_url: }, {id: 97777798, img_url: } .... ] Once the data is retrieved, I display the ...

reactjs

Could not locate the MenuIcon component in the MUI library

Currently, I'm in the process of adding an appbar from MUI that features a MenuIcon. Following the guidelines provided by MUI's documentation, I attempted to import MenuIcon using import MenuIcon from '@mui/icons-material/Menu';. Howeve ...

reactjsmaterial-ui

Trick for hiding CSS elements when input field is vacant

Is there a way to hide the search result when the input is empty? While everything is functioning correctly, I would like to prevent the search result from remaining visible after clearing the input field. For example, if you type 'A' and then d ...

htmlcss

Display elements that are positioned absolutely within a container with scrolling overflow

My modal contains a scrollable list with many items that have absolute positioned elements causing overflow within the modal. How can I ensure that the absolute positioned elements are visible in this scenario? .modal { width: 300px; border: 1px ...

htmlcssscrollabsolute

Implementing Text Input Props in MUI: A Step-by-Step Guide

Hey there! I'm currently working on a text field that includes InputProps, specifically an icon that triggers an onClick event. <TextField id="outlined-basic" label="Type Tag Name" variant="outline ...

reactjsmaterial-ui

Footer refusing to stay fixed at the bottom of the viewport

Currently, I am utilizing fullpage.js with scrolloverflow.js activated on the second section. In this setup, I would like to have a footer that remains fixed at the bottom of the viewport for the second section only. However, instead of achieving this desi ...

javascriptjqueryhtmlcssfullpage.js

Guide to Re-rendering a component inside the +layout.svelte

Can you provide guidance on how to update a component in +layout.svelte whenever the userType changes? I would like to toggle between a login and logout state in my navbar, where the state is dependent on currentUserType. I have a store for currentUserTyp ...

javascripthtmlcsstypescriptsvelte

"Using Flexbox to Align Child Elements of Varying

After learning about flexbox, a pressing question arose: How can I create a layout of columns similar to the one shown in this image? Check out MyCodeFiddle for more details! (http://jsfiddle.net/1s3bo913/) Click here to view the layout project: Layout Pr ...

htmlcssflexbox

Trigger a page refresh using a popup

Exploring the world of React for the first time has been quite a journey. I've encountered a hurdle in trying to force my page to render through a popup window. The setup involves a function component with a popup window that allows text changes on t ...

javascriptreactjsrender

formik does not support using the "new Date" function as an initial value

I have been trying to set the initial value of a date in my component like this, but when it renders I am encountering an error. const formik = useFormik ({ initialValues: { dob: new Date () } }) During this process, I'm facing the follow ...

javascriptreactjsmaterial-uidatepickerformik

Typescript error: The property 'set' is not found on type '{}'

Below is the code snippet from my store.tsx file: let store = {}; const globalStore = {}; globalStore.set = (key: string, value: string) => { store = { ...store, [key]: value }; } globalStore.get = (key) => { return store[key]; } export d ...

javascriptreactjstypescriptnext.js