react에서 여러 라이브러리를 사용하다보면 라이브러리 스타일을 커스텀 하고싶을 때가 있다. styled-components를 이용해 라이브러리를 커스텀 해보자!
이 글에서는 slider 을 사용하면서 커스텀한 내용을 정리해본다.

🌱styled-components 적용

기본적으로 slider는 아래와 같은 코드로 구성되어있다.

import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

만약 <Slider> 를 커스텀 하고 싶다면 styled(Slider) 로 Slider 하위 요소들까지도 변경할 수 있다.

const StyledSlider = styled(Slider)`
    height:100%;

    .slick-list{
        height:100%;
        display: flex;
        align-items: center;
    }
    .slick-prev{
        left: 6px;
        z-index: 999;
    }

    .slick-next{
        right:6px;
    }
`

그리고 styled-components 사용법과 같이 StyledSlider를 적어주면 된다!

#수정 전
 <Slider {...settings}>

# 수정 후
<StyledSlider {...settings}>