Can someone explain what I am doing wrong in applying Css to custom Button element-CodePudding

I am learning react. I am creating a custom button element and my Css is not being applied to the button element. What am I doing wrong?

Header.JS

import React from "react";
import Button from "../UI/Button"
import classes from "./Header.css"
const Header = () => {
const loginHandler = () => {};
return <React.Fragment>
    <div className="headerdiv">
        <Button className="headerButton" clickHandler={loginHandler} label=  

{"Login/Logout"}></Button>
            </div>
        </React.Fragment>
    };
    export default Header;

Button.js

import React from "react";

const Button = (prop) => {
    return (


        <button onClick={prop.clickHandler}>{prop.label}</button>
        );
    };

export default Button;

Header.css

 .headerButton {
  background-color: rgb(179, 44, 44);
  color: rgb(238, 64, 64);

}
.headerdiv {
  background-color: yellow;}

CodePudding user response：

Your import is wrong and you are applying the classname to the component "Button" not the "button"

Change

//remove import from Header.js
import classes from "./Header.css"
//also remove classname
<Button clickHandler={loginHandler} label=  

{"Login/Logout"}></Button>


//Add to button.js
import "./Header.css"
//Add the className to your button
<button className="headerButton" onClick={prop.clickHandler}>{prop.label}</button>

Should work now :)