React import className in children?

Question

I have a file called Button.jsx for reusing a button. It receives the children and className props.

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

Here's one of the components using the Button component above. Problem is, the className I passed as prop buttonStyle isn't working. Children is working.

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

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

Here's my css for reference.

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

Please do help me, how do I pass the className prop correctly? Thanks!

Answer 1

Props are passed as properties on a single object, not individual single-property objects. Destructure both props from the same object:

export default function Button({ children, buttonStyle })