在 styled-jsx 中如何将父组件样式应用于子组件

在这个例子中，我们期望当鼠标悬停在 .loginButton 上时，其内部的 元素能触发 transform: translateX(.5rem) 动画。然而，实际运行会发现，

原因分析：styled-jsx 的样式作用域仅限于 标签所在的组件内部。在 LoginButton 组件中， 元素是其直接子元素，因此 .loginButton 样式可以正确应用。但是，

和 元素是通过 children prop 传入的，它们在 LoginButton 组件的 JSX 结构中，是作为

的内容被渲染的，但它们并非 LoginButton 组件自身 JSX 定义的直接元素。styled-jsx 默认不会将样式“穿透”到这些外部传入的子元素。

解决方案：使用 :global() 选择器

为了解决 styled-jsx 的样式作用域限制，并允许父组件对 children prop 传入的子元素应用样式，styled-jsx 提供了 :global() 选择器。:global() 允许您在局部作用域的 styled-jsx 样式块中定义全局选择器，从而能够选中组件外部或通过 children prop 传入的元素。

如何应用 :global()

要将父组件的样式应用于 children 元素，只需在需要全局化的选择器前加上 :global()。对于上述 LoginButton 的例子，我们需要修改 元素的悬停样式：

// LoginButton.jsx (修正后的代码)export function LoginButton({children, className, ...props}){    return (                                    {`                    .loginButton {                        padding: .75rem 2rem;                        width: 100%;                        border-radius: 2rem;                        background: var(--primary);                        color: var(--back);                         font-size: 2rem !important;                    }                    /* 使用 :global(i) 确保样式作用于通过 children 传入的  元素 */                    .loginButton:hover :global(i) {                         transform: translateX(.5rem);                    }                `}                        

{children}