search

akiran / react-slick

React carousel component
http://react-slick.neostack.com/
MIT License
11.76k stars 2.11k forks source link

Custom Arrows Not Working Due To ::before pseudo-element #1826

Open Lori-Becker opened 4 years ago

Lori-Becker commented 4 years ago

I forked the sandbox and made my changes to demonstrate the issue: https://codesandbox.io/s/react-slick-playground-6e2o0?file=/index.js

Basically, all I have done is request that the next arrow be green, but it still appears as white. If you inspect the next arrow, you'll see that the color green has been applied to it. Opening up the button tag, however, you'll see ::before. That is what's really being displayed - slick-next:before. And so the button stays white, ignoring any custom styling.

In the documentation for custom arrows, changing the backgroundColor works because :before does not have any special styling for backgroundColor. But because color is defined for slick-next:before, it takes precedence.

I wanted more customized arrow that are not simply re-styling the existing arrows. My custom arrows appear alongside the slick-next:before arrow. They do not replace it. I cannot modify the styling for slick-next:before nor can I remove the element completely.

Is there an easy fix for this?

carlitosz commented 4 years ago

Not the ideal way of handling this issue, but you can override the styles for the arrows in your css file.

.container .slick-arrow::before { color: green; }

And you can get rid of the NextArrow component.

https://codesandbox.io/s/react-slick-playground-6xxyv?file=/index.css

gautamgoshopmatic commented 4 years ago

@Lori-Becker , the styles used i believe are not even part of this plugin but the origin slick.js, so it would be better to just have a rule like what @carlitosz suggest or if you don't want to globally reset the color and have multiple sliders , something like:

.container .slick-arrow::before { 
    color: inherit; 
}

suffice.

terrynguyen255 commented 4 years ago

In my case, when I want to overwrite arrows with my custom complex components, .slick-arrow::before cannot be a workaround. Could someone help?

terrynguyen255 commented 4 years ago

Can we take this issue into account, please?

ingen0s commented 9 months ago

just make a /css folder in your slider component, then copy over slick-theme.css, ajax-loader.gif and /fonts into the folder, then import that file instead of the one pointing to npm / repo ...

modify your theme as you please, create mutliple themes to import if necessary...