next.js 如何覆盖一个滑块的react-slick默认样式？

wfypjpf4 于 12个月前发布在 React

关注(0)|答案(1)|浏览(116)

我想用自定义的上一个/下一个箭头和箭头的位置来显示光滑的旋转木马。我使用的是nextjs 13，chakra-ui，react-slick和vanilla extract。
我实际上可以通过传递箭头组件来自定义箭头的样式

const settings = {
  ...
  prevArrow: <Arrow />
};

字符串
和箭头的位置通过设置全局css 'slick-zh'。
问题是，我想应用这个位置样式为一个特定的滑块只。（有多个滑块，我想应用不同的样式）
我已经尝试过使用香草提取类这样的东西，

export const classname = style({...})

<Slider className={classname} />

型
但这不起作用，因为类名应该是'slick-prev'以覆盖默认类名。
此外，↓不起作用
const settings = {..};
我也试过创建css文件

.slick-prev {
    font-size: 15px !important;
}

型
并将该文件导入到特定组件中，但它也会影响其他页面上的滑块。
有谁知道我如何可以覆盖'.slick-prev'风格为一个特定的滑块？

1条答案

我认为你应该像下面这样设置css命令，如果你在全局css文件中设置上一个和下一个箭头的字体大小。

.slick-next:before, .slick-prev:before {
    font-size: 15px !important;
}

字符串
当前的下一个/上一个箭头组件是基于图标组件的，所以要改变箭头的大小，我们应该通过使用before设置font-size但是如果你使用图像或文本按钮组件的下一个/上一个箭头组件，我认为我们可以在定制的箭头组件中使用style或className。请检查以下代码。

const settings = {
  ...
  prevArrow: <Arrow style={{ display: "block", background: "red" }} />
};