在孩子中反应导入className？

Question

我有一个名为

Button.jsx

的文件，用于重用按钮。它接收 Children 和 className 属性。

export default function Button({ children }, { buttonStyle }) {
    return(
        <>
            <button className={ buttonStyle }>
                { children }
            </button>
        </>
    )
}

这是使用上面 Button 组件的组件之一。问题是，我作为 prop buttonStyle 传递的 className 不起作用。孩子们正在工作。

import Button from "../components/Button";
import '../assets/styles/button.css';

export default function HeaderRoute() {
    return (
        <>
            // other unrelated codes
            <Button buttonStyle={resume-button}>Resume</Button>
        </>
    )
}

这是我的CSS供参考。

.resume-button {
    margin-right: 30px;
    border-radius: 50px;
}

请帮助我，如何正确传递 className 属性？谢谢！

Answer 1

Props 作为单个对象的属性传递，而不是单个单属性对象。从同一个对象解构两个道具：

export default function Button({ children, buttonStyle })