---
type: snippet
tags: [styled-components, css-in-js]
status: release
ctime: 2025-12-26
mtime: 2025-12-26
---

styled-components에서 `&-header` 같은 BEM 스타일 자식 선택자를 HTML에서 참조하는 방법? **없다.**

```tsx
// ❌ 해시된 클래스명과 매칭 안됨
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; }
`
```