React-slick: Easy way to change arrow color ? Not the background color

Created on 6 Jul 2017 · 8Comments · Source: akiran/react-slick

I want to change the inner arrow color. In the demo the browser has the css as

font-size: 20px;
    line-height: 1;
    color: #00558B;
    opacity: .75;

how do i replicate this? Is there an easy way to change this color property? I have no issue with custom arrow changing background, but i only want to change arrow color.

https://jsfiddle.net/9raxke45/

Cheers!

Source

foodaka

Most helpful comment

Just target the button's contents directly like this:

.slick-prev:before,
.slick-next:before {
  color: yellow;
}

https://jsfiddle.net/ss6LedtL/

radiovisual on 6 Jul 2017

👍17 🚀1

All 8 comments

Just target the button's contents directly like this:

.slick-prev:before,
.slick-next:before {
  color: yellow;
}

https://jsfiddle.net/ss6LedtL/

radiovisual on 6 Jul 2017

👍17 🚀1

Ah thanks for the quick response :)

foodaka on 7 Jul 2017

@radiovisual
When i add style to component directly dosenot work and when but it in styles in assets folder it work
thanks a lot

mostafahamed15 on 11 Apr 2018

If you want to change the component directly without changing anything in slick.css, you can add !important next to the color like this:

.slick-prev:before,
.slick-next:before {
  color: red!important;
}

avicrayyy on 17 Oct 2018

👍3

which place include this? like my style.css or nodemodules ?

Nageswaran-1997 on 6 Feb 2020

Try adding it to style.css

avicrayyy on 6 Feb 2020

@ieatcrayolaaa sorry but it not working directly any other way to solve this issue

aishwarya88 on 8 Jun 2020

This is incorrect when using react and typescript. You have to make an override stylesheet, CSS, not SCSS and include that to over write the styles.
import './YourCss.css'

and then you can over ride the default styling.