5

I am not sure why react-slick adds bellow inline properties while forming the slider.

width: 100%; display: inline-block;

Because of this my applications own CSS doesn't work and behaves differently. Please help me understanding and resolve this.

Please follow the mentioned link, where I tried to mimic the issue related to react-slick https://stackblitz.com/edit/react-b8wcgf

Bikram
  • 323
  • 5
  • 10

1 Answers1

-1

You need in CSS add after the element value !important.
For example:

.product-wrap {
  position: relative;
  width: 30px !important; 
  display: grid !important;
  border: 1px solid red; 
}

Instead of 30px and grid type your values but keep !important.

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Dexter
  • 1
  • 2
  • This is not a good solution as we should never have to add !important to our css, the best solution is to find an alternative to react-slick as is too big for any application, but if you have to use it here: https://github.com/akiran/react-slick/issues/1378 is a good solution, wrap your div around a react fragment and it won't add the width and display properties. react-slick alternatives: https://itnext.io/javascript-sliders-will-kill-your-website-performance-5e4925570e2b – Ray_Poly Jul 03 '23 at 15:49