Active dots class on Slick Slider with ReactJS - reactjs

Question

so I'm using slick slider on my ReactJS app, by the config I set custom class from my modular CSS, slick slider dots active class (".slick-active) is automatically toggled
but my CSS wont applied, how is the proper way to style the active state of the dots
thanks in advance,
import style from "./MainSlider.module.scss";
const settings = {
dots: true,
infinite: true,
autoplaySpeed: 5000,
speed: 1500,
autoplay: true,
dotsClass: style.slickDots,
slidesToShow: 1,
slidesToScroll: 1
};
<Slider {...settings}>
{
sliderItems.map((sliderItem, idx) => (
<div key={idx} className={style.sliderItem}>
<div className={style.image}>
<img src={sliderItem.image} alt="" />
</div>
<div className={style.text}>
<p>{sliderItem.title}</p>
<Link to="/service" className={style.more}>
<img src={ViewMore} alt=""/>
</Link>
</div>
</div>
))
}
</Slider>
this is my MainSlider.module.scss
.slider {
width: 70vw;
height: 70vh;
.slickDots {
position: absolute;
bottom: -50px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
li{
position: relative;
display: inline-block;
margin-right: 30px;
padding: 0;
cursor: pointer;
&.slick-active {
background: magenta !important;
button {
&::before {
background: red;
}
}
}
button {
font-size: 0;
line-height: 0;
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
border:2px solid white;
cursor: pointer;
outline: none;
background: transparent;
&::before {
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
content: ' ';
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
}
}
}
I add image instead of code so it will be more readable and can help you understand more about my problem
code

Answer 1

For applying your styles to global styles, like slick-active in css-modules you should use this approach:
:global(.slick-active) {
background-color: red;
}