::before 伪类影响 react-slick 中的箭头

Posted 2023-02-25

【中文标题】::before 伪类影响 react-slick 中的箭头

【英文标题】：::before pseudo class impacting arrows in react-slick

【发布时间】：2020-06-15 19:21:23

【问题描述】：

当我使用具有最少设置的 Slider 组件时，上一个和下一个箭头是白色的。这是因为 slick-theme.css 有一个 .slick-prev:before 和 .slick-next:before 将颜色设置为白色，所以箭头是不可见的！

由于我无法控制这些箭头，我想我会创建自定义箭头。我遵循了文档并在 style 属性中简单地设置了color: green。这没有任何作用，因为 .slick-next:before 确实是正在显示的内容。

如何摆脱.slick-next:before 样式？

见my codesandbox here。

【参考方案1】：

这是有关如何使用自定义箭头的文档的link。

我不想使用确切的例子，而只是作为参考。

更新：

在查看了您的代码框后，我看到您确实尝试过此操作，但原因是您通过在自定义箭头组件中传播 ...style 来应用默认值，您可以像这样创建一个完整的自定义箭头。

function SampleNextArrow(props) 
    const  className, style, onClick  = props;
    return (
        <div
            className=className
            style=
                height: "20px",
                width: "20px",
                border: "2px solid black",
                transform: "rotate(-45deg)",
                borderWidth: "0px 2px 2px 0px"
            
            onClick=onClick
        />
    );

我用最简单的方法来创建一个带有 css 边框的箭头，但显然你也可以使用背景图片。

【讨论】：

我遵循了自定义箭头的文档。它不起作用，因为 slick-next:before 是显示的内容，而不是我的自定义箭头。我尝试了自定义箭头的其他变体，并且能够显示我的箭头，但 slick-next:before 仍在屏幕上！

感谢更新！但是，您的更新会添加内容，但不会删除原始的 slick-next:before 元素。它还在那里。你看不到它，因为它是白色背景上的白色。我用您的更改更新了我的沙箱。 ::before 元素位于自定义箭头内。我需要将其完全删除。