Работают ли модули CSS с внешними библиотеками?
Я использую библиотеку Slider (https://react-slick.neostack.com/) в своем проекте React.
Когда я использую обычный 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?
Ответы 1
Похоже, вы столкнулись с проблемой, когда модули CSS неправильно применяют стили к компоненту 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>
Это работает, большое спасибо~ Однако я бы сказал, что этот дизайн CSS-модуля в React действительно болезненный. Я не помню, чтобы сталкивался с такими проблемами при использовании Svelte.