如何将父样式的JSX应用到子组件？我的JSX样式将应用于下面的父按钮元素（因为它有自己的JSX类），但不应用于其子元素。
下面是父按钮元素的代码：

export function LoginButton({children, className, ...props}){
        return (
            <>
                <style jsx>
                    {`
                        .loginButton {
                            padding: .75rem 2rem;
                            width: 100%;
                            border-radius: 2rem;
                            background: var(--primary);
                            color: var(--back); 
                            font-size: 2rem !important;
    
                        }
    
                        .loginButton:hover i {
                            transform: translateX(.5rem);
                        }
    
    
                    `}
                </style>
                <button className={`loginButton ${className}`} {...props}>
                    {children}
                </button>
            </>
        )
}

下面是我如何使用此代码的示例：

<LoginButton className="flex center gap1">
    <h3>Sign in</h3>
    <i className="bx bxs-right-arrow-alt"></i>
</LoginButton>

<i>元素没有获取按钮的JSX样式。我尝试过克隆元素并将JSX更新为global，但都不起作用。
如何将JSX样式应用于组件的子组件？