[react-slick] dots css 커스텀하기

react-slick라이브러리에서 dots를 바꾸기 위해서는 setting(props)값에 dotsClass를 추가해줘야 한다.
default로 되어 있는 class 선택자 대신 dotsClass명으로 class 선택자명을 바꿔 커스텀이 가능하다.

DOCS

수정 전

버튼의 색깔과 크기, 버튼 양 옆 마진 값을  바꿔주고 싶었다.  

import React from 'react'
import Slider from 'react-slick'
import './slick.css'

export default function ImgSlide({images}: any) {
  var settings = {
    dots: true,
    infinite: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    appendDots: (dots: any) => (
      <div
        style={{
          width: '100%',
          position: 'absolute',
          bottom: '24px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }}
      >
        <ul> {dots} </ul>
      </div>
    ),
    dotsClass: 'dots_custom'
  }

  return (
    <Slider {...settings}>
      {images.map((item: string) => (
        <ImgWrapper>
          <img src={item} alt="img" />
        </ImgWrapper>
      ))}
    </Slider>
  )
}

dotsClass에 dots를 커스텀 해줄 class명을 넣어준 뒤
해당 컴포넌트에 css 파일을 불러온다.
+appendDots는 Custom dots templates으로, dots를 img안으로 넣어주기 위해 추가해줬다.

/* slick.css */

.dots_custom {
  display: inline-block;
  vertical-align: middle;
  margin: auto 0;
  padding: 0;
}

.dots_custom li {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  margin: 0 6px;
  padding: 0;
}

.dots_custom li button {
  border: none;
  background: #d1d1d1;
  color: transparent;
  cursor: pointer;
  display: block;
  height: 8px;
  width: 8px;
  border-radius: 100%;
  padding: 0;
}

.dots_custom li.slick-active button {
  background-color: #08c1ce;
}

css 파일에는 다음과 같이 수정해주었다.

수정 후

참고 : https://stackoverflow.com/questions/54985215/how-to-add-slick-active-class-in-slider-dots-in-react-slick