问题是我在我的反应应用程序中使用了几个 reactSlick 组件,在家里,其他在团队页面中,我已经在 globall.css (nextjs) 中为主页自定义,现在我想更改名为 {{1 }} 在锦标赛页面中,一些如何使用 .slick-list
是否有任何解决方案可以更改类 css,而另一个页面不包含在其中?我想要广告内联 css,但我找不到 .slick-list 的任何解释来编辑它,而不是在 global.css 中
我的代码如下:
<Slider></Slider>
答案 0 :(得分:1)
首先,不建议在 global.css 文件中编写组件特定的 css。如果您熟悉 react-jss 或 styled-component ,那么您可以轻松完成。这个想法是给滑块组件一个类名,并使用类选择器的方式选择内部类。
我将尝试向您展示如何使用 react-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>
);
};