React styled-components封装组件如何自定义覆盖子元素样式

你之前写的继承样式不生效，核心原因有两个：一是自定义包裹组件DivWrapper没有透传className属性，styled-components 生成的扩展样式没有挂载点；二是扩展后的组件没有被实际渲染，原来的DivWrapper内部写死了渲染基础版CustomDiv，自然不会应用扩展样式。

下面是三种可直接落地的实现方式，按推荐优先级排序：

• 方案1：Props传参定制（最推荐）
  直接改造基础通用组件，支持通过参数传入内部b标签的右内边距，默认保留原有5px的配置，完全兼容旧代码，不需要每个场景都写新的样式组件。

  // 改造基础CustomDiv，支持接收样式参数
  const CustomDiv = styled.div`
    display:flex;
    b {
      // 未传参时默认使用5px，传参则使用传入值
      padding-right: ${props => props.bPaddingRight || '5px'};
    }
  `;
  
  // 改造DivWrapper，接收自定义参数透传给styled组件
  const DivWrapper = ({style, bPaddingRight, children}) => {
    return (
      <CustomDiv style={style} bPaddingRight={bPaddingRight}>
        {children}
      </CustomDiv>
    );
  };
  

  实际使用时直接传参即可：

  // 需要10px内边距的场景
  <DivWrapper bPaddingRight="10px">
    <b>加粗文本</b>普通文本
  </DivWrapper>
  
  // 不需要自定义的旧场景，不传参自动用默认5px，无需修改原有代码
  <DivWrapper>
    <b>加粗文本</b>普通文本
  </DivWrapper>
  

• 方案2：组件透传className后扩展继承
  如果你希望保留写扩展styled组件的使用习惯，只需要给DivWrapper加上className透传即可——styled-components 包裹自定义组件时，本质是通过传入className来注入生成的样式，没有透传的话样式永远不会生效。

  // 改造DivWrapper，接收并透传className
  const DivWrapper = ({style, className, children}) => {
    return (
      <CustomDiv style={style} className={className}>
        {children}
      </CustomDiv>
    );
  };
  

  改造后再写扩展样式就可以正常生效：

  // 直接继承DivWrapper写扩展样式
  const SuperCustomDiv = styled(DivWrapper)`
    b {
      padding-right:10px
    }
  `;
  
  // 使用扩展后的组件即可
  <SuperCustomDiv>
    <b>加粗文本</b>普通文本
  </SuperCustomDiv>
  

• 方案3：父级嵌套覆盖（临时应急用）
  如果你暂时不能修改基础通用组件的代码，可以在父级组件里写嵌套选择器强行覆盖样式，缺点是样式优先级耦合高，后期维护容易出问题，只适合临时改样式用。

  const TempPageWrapper = styled.div`
    // 嵌套覆盖内部DivWrapper下b标签的样式
    ${DivWrapper} b {
      padding-right: 10px;
    }
  `;
  
  // 使用时用临时父组件包裹
  <TempPageWrapper>
    <DivWrapper>
      <b>加粗文本</b>普通文本
    </DivWrapper>
  </TempPageWrapper>
  

注意：不要给内部样式加过高优先级的选择器（比如!important），不然后续自定义样式会很难覆盖。

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