如何使用Styled Component为React子组件设置CSS样式？

原有写法不生效的核心原因是：Styled Components 无法直接将组件名作为原生CSS选择器识别，需要使用框架提供的组件引用语法，同时要保证子组件支持样式透传。

前置要求：子组件透传className #

如果SectionComponent是自定义的普通React组件，需要手动将props中的className挂载到自身根DOM节点上，Styled Components的样式才能生效；如果SectionComponent本身是通过styled方法创建的组件，框架会自动处理透传，无需额外修改：

// 普通React组件写法，需要手动透传className
const SectionComponent = ({ text, className }) => {
  return <section className={className}>{text}</section>
}

// 基于styled创建的组件，自动支持className透传
const SectionComponent = styled.section`
  // SectionComponent 自身的基础样式
`

正确的Slider样式写法 #

直接在Slider的样式模板中引用SectionComponent变量即可，等价于原生CSS中.slider section后代选择器的效果：

import styled from 'styled-components'
// 注意要先引入/定义SectionComponent，再定义Slider
import { SectionComponent } from './你的组件路径'

export const Slider = styled.div`
  // Slider本身的样式
  width: 100%;
  overflow-x: auto;

  // 子组件样式定义，直接引用组件变量
  ${SectionComponent} {
    // 需要给Section设置的样式示例：
    padding: 16px 20px;
    flex-shrink: 0;
    width: 100%;
  }
`

兼容方案（子组件不可修改时） #

如果SectionComponent是第三方组件，无法修改内部代码透传className，可以手动给子组件添加自定义类名，通过类选择器设置样式：

// 组件调用时添加类名
<Slider>
  <SectionComponent className="slider-section" text="Content A" />
  <SectionComponent className="slider-section" text="Content B" />
</Slider>

export const Slider = styled.div`
  // Slider自身样式
  .slider-section {
    // 子组件样式
  }
`

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