CSS 模块可以与外部库一起使用吗？

Question

我在我的 React 项目中使用 Slider 库 (https://react-slick.neostack.com/)。

当我使用常规 CSS 时，滑块可以正确设置样式，但是当使用 css 模块时，它不起作用。

tsx 文件如下：

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

然后

styles.module.css

就像：

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

但在开发工具中，样式并未应用。其结构为：

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

其中类名

styles_slider__5dDaY

已正确添加，但样式未正确添加。

我想知道为什么。是因为 CSS 模块无法与外部库配合使用吗？

如果是，我该如何设计这个

Slider

组件的样式？

Answer 1

您似乎遇到了一个问题，CSS 模块无法正确地将样式从外部库，react-slick 应用到 Slider 组件。

CSS 模块通常通过在编译时生成唯一的类名并将它们映射到您的组件来工作。然而，有时外部库可能无法与 CSS 模块很好地配合，因为它们可能没有被设计为直接与它们交互。

使用 CSS 模块对外部库中的组件进行样式化的一种解决方法是结合使用 CSS 模块类和常规 CSS 类。

创建一个CSS文件“custom-style.css”

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

导入到文件中

import './custom-style.css';

那么你的 jsx 文件就像这样

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

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