Question 138746 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Why aren’t styles working correctly in the Reactjs css file?

I am facing a weird problem with my css. I have created a module.css file for Header.js component and written some css but only path styling rule is effecting not others. Please help me find the issue. TIA!

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;
}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    according to react official documentation header.module.css styles should be used in curly braces. so we have to import css file as import styles from './header.module.css'; and use class as className={style.header-container}


  2. 0

    either you import css like this

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

    without .module
    or

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

    and then use it in code like this :

    <div className={css.header-container}>
  <h1 className={css.header-title}>Some text here</h1>
  <svg></svg>
</div>
    Login or Signup to reply.
  3. 0

    it is better to import and use your CSS module stylesheet like:

    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}>Some text here</h1>
            ...
        </div>
    );
};

export default Header;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search