React-slick: Styles overwritten on application-owned div elements

[nihlton]

demo: https://codesandbox.io/s/7yvq357xz6

for the given markup:

<Slider {...settings}>
  <div style={slideStyle}>
    <img style={imageStyle} src="http://placekitten.com/g/400/200" />
  </div>
  ...
</Slider>

{slideStyle} will be ignored / overwritten.

[lironzluf]

Got the same issue, they're overwritten by

style: {
 width: 100 / settings.slidesPerRow + "%",
 display: "inline-block"
}

[mihauko]

Are those inline styles connected to additional div wrapper like on screenshot? What is the purpose of this div?

It can be also visible on @nihlton demo.

I have this structure on 0.23.1 version

[ViacheslavBurlaka]

@mihauko i have the same problem

[nihlton]

@mihauko - was wondering that as well.

I suspect that they intended to apply those styles to the additional div wrapper, and are applying them to the application div instead.

[nihlton]

any update on this issue?

[dhruvramdev]

Facing Same Issue.

[nihlton]

any update on this issue?

[mopilo]

same here

[charliedavison]

+1

[tetogomez]

useful component but it's so hard to use with custom styles. :(

[charliedavison]

Ended up wrapping an extra div around everything so we could prevent our styles from being overwritten. Would be nice if this was fixed properly though.

[remingtonchan]

@charliedavison Hi, how was your approach in "wrapping everything"? I still can't get around this. 😅

[pinglinh]

Any updates on this issue? 😭

[goriverna]

As a workaround, you can use className on your div and define css class, in this way you can override css rules.

<Slider {...settings}>
  <div className='slick-custom'>
    <img  src="http://placekitten.com/g/400/200" />
  </div>
  ...
</Slider>

and then create css rule on you css style:

.slick-custom{
    display: flex !important;
    justify-content: center;
}

[akiran]

Fixed in [email protected]

[chrisneal]

@akiran We're still experiencing this issue in 0.25.2.

[manuelgomezo]

same here

[noobG]

yep still broken

[rphly]

Hi guys, I found a workaround for this although it's less than ideal.

You can wrap your application div with <ul> and the styles won't be overwritten.

Example:

return (
    <ul key={i}>
        {...your component here}    
    </ul> 
)

to clarify, your component can use inline JS styles as usual without the need for css classname

[abhishekashyap]

Any follow-ups? Still experiencing on 0.27.0

[tazcarper]

Still occurring in 0.27.0. Any ETA on fix?

[tazcarper]

Could this issue be because React used to require you wrapping lists with a <div> or something similar? We can use <React.Fragment> instead now and it wont add the unnecessary empty <div> within the slides. Seems like the root is around the logic creating rows per slide. Even if you have one row, it still executes this.

slider.js
Replace this:
newSlide.push(<div key={10 * i + j}>{row}</div>);

With this:
newSlide.push(<React.Fragment key={10 * i + j}>{row}</React.Fragment>);

[tazcarper]

Sounds like the author wants to wait until a future major change to implement this.

[templateio]

Create a component for slide and use Hooks to pass style:
Slide.js or \ :

function Slide() { 
const [style, setStyle] = useState({  
  backgroundImage: 'url(' + process.env.PUBLIC_URL +'/img/url.jpg)',  
  backgroundRepeat: 'no-repeat'  
});  

return (  
  <div  
    className="..."  
    style={style}  
  >  
  ...content...  
  </div>  
)

Hook logic will ensure that your component always stays up to date with state! https://reactjs.org/docs/hooks-state.html
if using redux global state you can use useSelector
PS inside 's with Slide list component for extra fancy points

[c-jain]

I am still facing this issue with version 0.28.0. I want my div to have display: flex; but it is not working. Did anyone get the solution? currently, I am adding !important to fix the situation but a cleaner solution would be great. Please someone help!

[performautodev]

I am still facing this issue with version 0.28.0. I want my div to have display: flex; but it is not working. Did anyone get the solution? currently, I am adding !important to fix the situation but a cleaner solution would be great. Please someone help!

You can change on node_modules\react-slick\lib\slider.js L 251

newSlide.push( /#__PURE__/_react["default"].createElement("div", {
key: 10 * i + j
}, row));

By :
newSlide.push( /#__PURE__/_react["default"].createElement(_react["default"].Fragment, {
key: 10 * i + j
}, row));