react-slick에 styled-component를 사용해보자..

import * as BannerSlickSlider from "./BannerSlickSlider";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { SettingsProps } from "./BannerSlickSlider.types";

export default function BannerSlickSliderUI({ settings }: SettingsProps) {
  return (
    <BannerSlickSlider.Wrapper>
      <BannerSlickSlider.CustomSlider {...settings}>
        <BannerSlickSlider.ElWrapper>
          <BannerSlickSlider.Logo src={""} />
          <BannerSlickSlider.Title>Title</BannerSlickSlider.Title>
          <BannerSlickSlider.Content>Content</BannerSlickSlider.Content>
          <a>
            <BannerSlickSlider.Button>Button</BannerSlickSlider.Button>
          </a>
        </BannerSlickSlider.ElWrapper>
      </BannerSlickSlider.CustomSlider>
    </BannerSlickSlider.Wrapper>
  );
}

import styled from "@emotion/styled";
import Slider from "react-slick";

// 슬라이더 커스텀
export const CustomSlider = styled(Slider)`
  width: 100%;
  height: 100%;
  .slick-prev::before,
  .slick-next::before {
	// 기본으로 제공하는 이전, 다음 버튼을 없앰
    opacity: 0;
    display: none;
  }
  .slick-slide div {
    //슬라이더  컨텐츠
  }

styled-component를 사용해 react-slick의 스타일을 수정하려면, styled()에 import로 불러온 Slider를 넣어주면 된다.