[英]Setting styles for react-slick
I am using react-slick ( https://react-slick.neostack.com/ ) to make an easy slider component of my blogs.我正在使用 react-slick ( https://react-slick.neostack.com/ ) 为我的博客创建一个简单的 slider 组件。 Now, I want to simply set position: relative and z-index: 50 to the div with class slack-current (which is generated by the Slider component), but can not find any way to do this.现在,我想简单地将 position: relative 和 z-index: 50 设置为带有 class slack-current 的 div(由 Slider 组件生成),但找不到任何方法来执行此操作。 I am using NextJS with the following component:我将 NextJS 与以下组件一起使用:
function Carousel({ blogs }) {
const [imageIndex, setImageIndex] = useState(0);
const transformDate = (date) => {
return date.substring(0, 10);
};
const NextArrow = ({ onClick }) => {
return (
<div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
<FaArrowRight />
</div>
);
};
const PrevArrow = ({ onClick }) => {
return (
<div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
<FaArrowLeft />
</div>
);
};
const settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
nextArrow: <NextArrow />,
prevArrow: <PrevArrow />,
beforeChange: (current, next) => setImageIndex(next),
};
return (
<div className={styles.carouselContainer}>
<Slider {...settings} className={styles.slider}>
{blogs.map((blog, idx) => (
<div key={idx} className={styles.slide}>
<div
className={
idx === imageIndex
? `${styles.innerSlide} ${styles.activeSlide}`
: `${styles.innerSlide} ${styles.passiveSlide}`
}
>
<p>{transformDate(blog.created_on)}</p>
<h3>{blog.title}</h3>
<p>{blog.subtitle}</p>
<button
className={
idx === imageIndex
? `${styles.button} ${styles.activeButton}`
: styles.button
}
>
<Link href={"/blog/" + blog.id}>READ MORE</Link>
</button>
</div>
</div>
))}
</Slider>
</div>
);
}
export default Carousel;
So since I set className ={styles.slider} on the Slider component, I thought I could solve it this way in CSS:因此,由于我在 Slider 组件上设置了 className ={styles.slider},所以我认为我可以在 CSS 中这样解决它:
.slider .slick-current {
position: relative !important;
z-index: 50 !important;
}
However, this shows up nowhere and thus has no effect.但是,这无处显示,因此没有效果。 I also tried to do this with a JavaScript queryselector, but this does not work either.我还尝试使用 JavaScript 查询选择器来执行此操作,但这也不起作用。 Would anybody know how to do this seemingly simple thing?有人知道如何做这个看似简单的事情吗?
I got it working with JavaScript, although it's not an elegant solution.我让它与 JavaScript 一起工作,尽管它不是一个优雅的解决方案。 The following will add position:relative and z-index:50 to the element with CSS class slick-current, and will remove it from the other active slides (since the slick current class changes slides when another slides becomes the current slide) using useEffect:以下将使用 useEffect 将 position:relative 和 z-index:50 添加到具有 CSS class slick-current 的元素,并将其从其他活动幻灯片中删除(因为当另一张幻灯片成为当前幻灯片时,slick current class 会更改幻灯片) :
function Carousel({ blogs }) {
const [imageIndex, setImageIndex] = useState(0);
const transformDate = (date) => {
return date.substring(0, 10);
};
const NextArrow = ({ onClick }) => {
return (
<div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
<FaArrowRight />
</div>
);
};
const PrevArrow = ({ onClick }) => {
return (
<div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
<FaArrowLeft />
</div>
);
};
useEffect(() => {
document.querySelectorAll(".slick-active").forEach((el) => {
el.style.setProperty("position", "static", "important");
});
document
.querySelectorAll(".slick-current")
.style.setProperty("position", "relative", "important");
document
.querySelectorAll(".slick-current")
.style.setProperty("z-index", "50", "important");
}, [imageIndex]);
const settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
nextArrow: <NextArrow />,
prevArrow: <PrevArrow />,
beforeChange: (current, next) => setImageIndex(next),
};
return (
<div className={styles.carouselContainer}>
<Slider {...settings}>
{blogs.map((blog, idx) => (
<div key={idx}>
<div
className={
idx === imageIndex
? `${styles.innerSlide} ${styles.activeSlide}`
: `${styles.innerSlide} ${styles.passiveSlide}`
}
>
<p>{transformDate(blog.created_on)}</p>
<h3>{blog.title}</h3>
<p>{blog.subtitle}</p>
<button
className={
idx === imageIndex
? `${styles.button} ${styles.activeButton}`
: styles.button
}
>
<Link href={"/blog/" + blog.id}>READ MORE</Link>
</button>
</div>
</div>
))}
</Slider>
</div>
);
}
export default Carousel;
Better solutions are still welcome!仍然欢迎更好的解决方案!
I know this is old but I was looking for a solution to different problem and came across yours.我知道这很旧,但我正在寻找解决不同问题的方法并遇到了你的问题。 Have you tried using:global?您是否尝试过使用:全局? You could pass the styles through parent container like this:您可以像这样通过父容器传递 styles:
<section className={styles.container}>
<Slider>
// slider content
</Slider>
</section>
And in the styles file:在 styles 文件中:
.container {
:global .slider .slick-current {
position: relative !important;
z-index: 50 !important;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.