styled-components에서 &-header 같은 BEM 스타일 자식 선택자를 HTML에서 참조하는 방법? 없다. & 는 컴포넌트에 붙은 생성 클래스라 &-header 는 해시 뒤에 -header 가 붙은 클래스가 된다.¹ 대신 styled 컴포넌트마다 고정 클래스가 있어서 ${Header} 로 선택자에 끼울 수 있다.²

// ❌ 해시된 클래스명과 매칭 안됨
const Container = styled.div`
  &-header { color: red; }
`

// ✅ 방법 1: 일반 클래스 선택자
const Container = styled.div`
  .header { color: red; }
`
<Container><div className="header">Header</div></Container>

// ✅ 방법 2: Styled 컴포넌트 변수로 선언 (추천)
const Header = styled.div`color: red;`
const Container = styled.div`
  ${Header} { margin-bottom: 20px; }
`

---

Footnotes

1. Basics | styled-components: “& a single ampersand refers to all instances of the component …” ↩

2. Advanced Usage — Referring to other components | styled-components: “Whenever a component is created or wrapped by the styled() factory function, it is also assigned a stable CSS class for use in targeting.” ↩