0

The previous and next arrows are white when I use the Slider component with minimal settings. This is because slick-theme.css has a .slick-prev:before and .slick-next:before that sets the color to white, so the arrows are invisible!

Since I have no control over these arrows, I figured I would create custom arrows. I followed the documentation and simply set color: green in the style prop. That did nothing, because .slick-next:before is really what's being displayed.

How do I get rid of .slick-next:before styling?

See my codesandbox here.

L Becker
  • 685
  • 8
  • 28

1 Answers1

0

Here is a link to the documentation on how to use custom arrows.

I wouldn't want to utilize the exact example but just as a reference.

Update:

After reviewing your codesandbox I see you actually tried this but the reason is cause you were applying the default by spreading ...style in your custom arrow component, you can create a complete custom arrow like this. 

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}
        />
    );
}

I used the simplest way to create an arrow with css border but you can obviously use a background image as well.

Shmili Breuer
  • 3,927
  • 2
  • 17
  • 26
  • I followed the documentation for custom arrows. It did not work because slick-next:before is what is being displayed, not my custom arrow. I've tried other variations of the custom arrows and I was able to get my arrow to show, but slick-next:before is still on the screen! – L Becker Jun 16 '20 at 19:43
  • I appreciate the update! However, your update adds content, but does not remove the original slick-next:before element. It's still there. You can't see it because it's white on a white background. I updated my sandbox with your changes. The ::before element is inside the custom arrow. I need it to be removed completely. – L Becker Jun 16 '20 at 20:18