Do CSS modules work with external libraries?

I am using a Slider library (https://react-slick.neostack.com/) in my React project.

When I use regular CSS, the slider can be styled correctly, but when using css module, it doesn't work.

The tsx file is like:

import styles from './styles.module.css';
.
.
.
<div className={`${styles.slider} py-[8px]`}>
   <Slider {...settings} />
</div>

Then the styles.module.css is like:

.slider {
    .slick-arrow {
        z-index: 10;
        top: 25% !important;
        transform: unset !important;
    }
}

But in dev tools, the styles are not applied. The structure is:

<div class="styles_slider__5dDaY py-[8px]">
    <div class="slick-slider slick-initialized">
        <span class="slick-arrow slick-prev slick-disabled">
.
.
.

where the class name styles_slider__5dDaY is correctly added, but styles aren't.

I wonder why. Is it because CSS modules don't work with external libraries?

If yes, how can I style this Slider component?

Solution

It seems like you're facing an issue where CSS modules are not properly applying styles to the Slider component from the external library, react-slick.

CSS modules typically work by generating unique class names at compile time and mapping them to your components. However, sometimes external libraries might not play well with CSS modules because they might not be designed to interact with them directly.

One workaround for styling components from external libraries with CSS modules is to use a combination of CSS module classes and regular CSS classes.

Create a css file "custom-style.css"

.slick-arrow-custom {
    z-index: 10;
    top: 25% !important;
    transform: unset !important;
}

Import in in file

import './custom-style.css';

then your jsx file be like

import styles from './styles.module.css';
import './custom-style.css'; 

<div className={`${styles.slider} ${styles.py8}`}>
   <Slider {...settings} className="slick-arrow-custom" /> 
</div>