样式化react-alice-carousel圆点

Question

我有一个react carousel添加到我的一个组件。下面是代码:

<div className={styles.carouselContainer}>
<AliceCarousel
mouseTracking
disableButtonsControls={true}
responsive={{
0: {
items: 2,
},
1024: {
items: 3,
},
}}
>
{icons.map(icon => (
<Image
src={`${mainsite}/${icon.src}`}
width={78}
height={48}
/>
))}
</AliceCarousel>
</div>

我正在使用css模块，而不是纯css，如我的div所示。

我怎么能样式carousel点，因为我不能访问css选择器相同的方式，我将如果我不使用css模块?

Answer 1

我知道这个问题可能很老了，但我发现自己也遇到过同样的情况，我通过覆盖react-alice-carousel css类来解决这个问题。

Alice-Carousel使用.alice-carousel__dots-itemcss类为非活动点设计样式，.alice-carousel__dots-item.__active类为活动点设计样式。因此，通过重写它们你可以给圆点

设置样式carousel.css:

.alice-carousel__dots-item.__active{
background: #782bc6 !important;
}
.alice-carousel__dots-item {
background: #9134ee57 !important;
}

将css导入组件

carousel.js:

import "./carousel.css";
import AliceCarousel from "react-alice-carousel";
export const Carousel = () => {
const items = [
<div className="item" data-value="1">
1
</div>,
<div className="item" data-value="2">
2
</div>,
<div className="item" data-value="3">
3
</div>,
<div className="item" data-value="4">
4
</div>,
<div className="item" data-value="5">
5
</div>
];
return (
<AliceCarousel
mouseTracking
items={items}
responsive={{
0: {
items: 2
},
1024: {
items: 3
}
}}
></AliceCarousel>
);
};

这里是codesandbox的链接:https://codesandbox.io/s/react-alice-carousel-styling-jd9t06?file=/src/App.js

Answer 2

根据你的需要设置ArrowL和ArrowR组件的样式:

renderPrevButton={( )=>{return <ArrowL/>}}
renderNextButton={( )=>{return <ArrowR/>}}