Using both props.children and default Parameters-CodePudding

I'm facing a problem using default parameters in a functional component (React.js v17.0.2). I have the component above, which receives specific parameters with a default value. How can I make this component able to still receiving props like when using MyComponent(props){...} ? More specific, how can I make this component able to receive props.children?

export default function Box({style = "red-box"}, {size="xl"} ) {
console.log(props)
return (
    <div className={`${style} ${size}`}>
        {props.children} <----
    </div>
)}

Hope the idea is clear. Thanks in advance!

CodePudding user response：

Does this suffice?

export default function Box({children, size="xl", style="red-box"}) {
return (
    <div className={`${style} ${size}`}>
        {children}
    </div>
)}