[REACT] Styled Component 응용하기

컴포넌트의 자식 태그까지 컴포넌트로 만들기 버거울 때

만약 <Header> 라는 태그 안에 <h1>이 들어있는데, 이런 사소한 태그들까지 컴포넌트로 만들기 버거울 때가 있다.

이럴 때는 '&'를 사용해서 자식 태그에 스타일을 이어서 줄 수 있다.

 

const Header = styled.header`
    height: 44px;
    background: white;
    position: relative;
    padding: 0;
    text-align: center;
    
    & h1 {
        margin: 0;
        font-size: 17px;
        color: #333;
        line-height: 44px;
}

 

 

다양한 선택자도 사용 가능하다

& > h1 { ... }

 

---

라이브러리에서 제공하는 컴포넌트에 스타일 주고싶을 때

styled.div`` 이 형태가 아니라

styled(컴포넌트명)`` 이 형태로 하면 된다.

const CloseBtn = styled(CloseOutlined)`
    position: absolute;
    right: 0;
    top: 0;
    padding: 15px;
    line-height: 14px;
    cursor: pointer;
`

---

클래스를 덮어씌우면서 스타일을 변경해주고 싶을 때

예를들어 react-slick 라이브러리를 이용해서 슬라이드를 구현했는데 세세한 스타일 변경이 필요하다.

근데 slick으로 만들어진 태그들은 고유의 className을 가지고 있어서. 이걸 JSX에서 어떻게 변경해줄 수 있는지 애매하다.

이걸 해결해 줄 수 있는 게 styled component에서 제공해주는 createGlobalStyle이 있다.

아래 코드와 같이 컴포넌트를 만들어준 뒤, JSX 부분에 아무 곳에나 넣어주면 된다.

const Global = createGlobalStyle`
    .slick-slide {
        display:inline-block;
    }
`

const ImagesZoom = ({ images, onClose }) => {
    return (
        <>
            <Global />
            ...
        </>
    )
}

d