有人可以解释我在将 Css 应用于自定义 Button 元素时做错了什么吗

Question

我正在学习反应。 我正在创建一个自定义按钮元素，但我的 Css 没有应用于按钮元素。我做错了什么？

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

Answer 1

您的导入错误，您将类名应用于组件“按钮”而不是“按钮”

改变

//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>

现在应该可以工作了:)