iT邦幫忙

0

請問react-slick修改css的問題

小弟在使用Next.js以及tailwindcss,然後用react-slick做輪播

目前react-slick預設的css樣式有出來了,但是想請問該如何修改成自己想要的css呢?
以前我是再創一個styles.css來覆蓋slick-theme.css的樣式,但是在Next.js要用module.css就有點不知道該如何做

然後我又試著直接到slick-theme.css裡面去修改,但是卻沒有效果,還是預設的樣式。

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

function SliderTest() {
  const settings = {
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    autoplay: true,
    autoplaySpeed: 1500,
  };
  return (
    <Slider className="text-center" {...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>
  );
}

export default SliderTest;
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
Felix
iT邦研究生 2 級 ‧ 2022-01-13 15:28:28
import "./slick-carousel/slick/slick.css";
import "./slick-carousel/slick/slick-theme.css";

import 而言,您的路徑是模組名稱,加上 ./ 就會被視為路徑。

我要發表回答

立即登入回答