小弟在使用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;
import "./slick-carousel/slick/slick.css";
import "./slick-carousel/slick/slick-theme.css";
對 import
而言,您的路徑是模組名稱,加上 ./
就會被視為路徑。