如何使用styled-components为外部引入组件的内部子元素自定义样式

实现核心逻辑：Foo组件会将外部传入的className参数挂载到自身最外层容器节点上，你可以基于该自定义类名通过后代选择器命中内部的Title、Content节点进行样式覆盖。

方案1：项目已集成styled-components时优先使用 #

直接用styled包裹Foo组件，基于嵌套选择器修改内部样式：

import styled from 'styled-components'
import {Foo} from 'external-stuff'

const StyledFoo = styled(Foo)`
  /* 覆盖Title样式：第一个子div对应Title节点 */
  & > div:first-of-type {
    border: 1px solid #000;
  }
  /* 覆盖Content样式：第二个子div对应Content节点 */
  & > div:last-of-type {
    margin: 20px; // 自定义修改默认margin
  }
`

// 业务代码中直接替换原有Foo组件即可
function Component() {
  return (
    <StyledFoo title="你的标题">
      <p>bar</p>
    </StyledFoo>
  )
}

方案2：使用原生CSS/预处理器实现 #

先给Foo传入自定义类名，再编写对应的后代选择样式：

Component.tsx 代码： #

import {Foo} from 'external-stuff'
import './Component.css'

function Component() {
  return (
    <Foo className="custom-foo-wrapper" title="你的标题">
      <p>bar</p>
    </Foo>
  )
}

Component.css 代码： #

/* 覆盖Title样式 */
.custom-foo-wrapper > div:first-of-type {
  border: 1px solid #000 !important; /* 样式优先级不足时可加!important */
}
/* 覆盖Content样式 */
.custom-foo-wrapper > div:last-of-type {
  margin: 20px;
}

稳定性优化建议 #

如果担心Foo内部节点顺序调整导致选择器失效，可以先在浏览器控制台查看Title、Content渲染后的固定类名前缀（styled-components生成的组件类名前缀固定，格式通常为sc-xxxxxx），直接用类名前缀作为选择条件即可，示例：

.custom-foo-wrapper .sc-abc123 {
  border: 1px solid #000;
}

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