styles is not working in react by stylesheet-CodePudding

I am using sass in react project by stylesheet but is not working My applying class is not working

here is code sass code

.header{
background-color: #000;
position: relative;
width: 100%;
top:0;
left: 0;
z-index: 100;

}

here is react code.

        import React from "react"
    import  "../Styles/Header.module.scss"
   const Header = () => {
    return (
    <>
      <header className="header">
        <div className="grid">
          <div className="main_logo">
            <a>ds</a>
          </div>
          <div className="navigation_btn">
            <samp></samp>
          </div>
        </div>
      </header>
    </>
  );
};

export default Header;

I saw it in the browser but the background color is not showing.

it working with pure HTML select . i applying style without using class is work.

CodePudding user response：

You are using .module scss. So first of all you must convert your import as

import classes "../Styles/Header.module.scss"

and second you will call in your tag:

<header className={classes.header}>