在滑块中编辑光滑列表类
在滑块中编辑光滑列表类
提问于 2021-07-03 17:46:34
问题是，我在自己的reactSlick中使用了几个reactSlick组件，在家里，其他组件在homepage中，我已经为主页定制了globall.css (nextjs)，现在我想在锦标赛页面中更改名为.slick-list的类，其中有些是如何使用<Slider></Slider>自动生成的。
是否有任何解决方案来更改类css，而另一个页面没有包含在其中？我想插入css，但我找不到任何解释来编辑它，而不是在global.css中。
我的代码如下：
<Slider {...settings}>
{sliderData.map((slide, index) => {
return (
<div
className='TeamSlider'
key={index}
style={{ height: '185px !important' }}
>
<img src={slide.image} alt='slider' key={index} />
</div>
)
})}
</Slider>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-04 08:56:18
首先，不建议在global.css文件中编写组件特定的css。如果您熟悉react jss或样式组件，那么您可以轻松地完成它。其思想是给滑块组件提供一个className，并使用类选择器的方式选择内部类。
我试着展示给你看--jss。
import { createUseStyles } from "react-jss";
const useStyles = createUseStyles({
sliderContainer: {
"& .slick-list": {
marginTop: "100px",
},
},
});
export const SomeComponent = () => {
const classes = useStyles();
const settings = {
className: classes.sliderContainer,
};
return (
<Slider {...settings}>
{sliderData.map((slide, index) => {
return (
<div
className="TeamSlider"
key={index}
style={{ height: "185px !important" }}
>
<img src={slide.image} alt="slider" key={index} />
</div>
);
})}
</Slider>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68238673
复制相关文章
相似问题
腾讯云开发者
