如何将父组件Styled JSX样式应用到子组件？

Styled JSX默认采用样式隔离机制，仅组件内部定义的元素能匹配到带作用域哈希的样式规则。对于外部传入的子元素（比如你示例中的<i>标签），可以通过以下几种方式解决样式不生效的问题：

方法1：使用:global()限定作用域内的全局选择器 #

用:global()包裹子元素选择器，让规则能匹配外部传入的元素，同时限定在.loginButton的上下文内，避免全局样式污染。

修改你的样式代码：

<style jsx>{`
  .loginButton {
    padding: .75rem 2rem;
    width: 100%;
    border-radius: 2rem;
    background: var(--primary);
    color: var(--back); 
    font-size: 2rem !important;
  }

  .loginButton:hover :global(i) {
    transform: translateX(.5rem);
  }
`}</style>

方法2：克隆子元素并添加作用域类名 #

通过React的React.Children.map和React.cloneElement，给需要样式化的子元素添加Styled JSX作用域内的类名，实现精准样式控制。

修改LoginButton组件：

import { Children, cloneElement } from 'react';

export function LoginButton({children, className, ...props}){
  // 遍历子元素，仅给<i>标签添加自定义作用域类名
  const styledChildren = Children.map(children, child => {
    if (child.type === 'i') {
      return cloneElement(child, {
        className: `${child.props.className || ''} loginButton-icon`
      });
    }
    return child;
  });

  return (
    <>
      <style jsx>{`
        .loginButton {
          padding: .75rem 2rem;
          width: 100%;
          border-radius: 2rem;
          background: var(--primary);
          color: var(--back); 
          font-size: 2rem !important;
        }

        .loginButton:hover .loginButton-icon {
          transform: translateX(.5rem);
        }
      `}</style>
      <button className={`loginButton ${className}`} {...props}>
        {styledChildren}
      </button>
    </>
  )
}

方法3：全局样式块（不推荐） #

将<style jsx>改为<style jsx global>，让整个样式块规则全局生效。但这种方式会让.loginButton的样式也变成全局，容易引发样式冲突，仅在确定无冲突的场景下使用：

<style jsx global>{`
  .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>

内容的提问来源于stack exchange，提问作者nitlix