can I pass custom Style or Class to the outerDiv ? about react-infinite-scroll-component

[mrtheyann]

Still a problem, actually

[ankeetmaini]

@Anna-Weaver-JL, @harvinder-ss I know this reply is a little late. I've created a codesandbox showing this in action.

https://codesandbox.io/s/1y7jjvlwjl

See line 39, there the outer div contains a custom div which is styled in a light yellow color. I am closing this issue. Please reopen if you still face any issue.

[BlueBeret]

for anyone who still need to solve the problem. My solution was:

component

<div className="infinite-scroll-container">
<InfiniteScroll />
</div>

css file

.infinite-scroll-container > div:first-child {
/* this styling goes to the outer div of infinite scroll */
}

[Anna-Weaver-JL]

Thank you @ankeetmaini - I wasn't clear enought with the issue I think. Have a look at this sandbox where I have made replicated our issue.

https://codesandbox.io/s/k24w99vojr

We have a grid of details each box in the grid takes a percentage of the row. As long as our first row contains enough items to fill the row the infinite scroll works perfectly but once we have a situation were there are very few items the first display sets the size of the parent div and the percentage calculation becomes an issue. In the sandbox above I have set the size so that 2 items show on a row. When I set the array to start with a single item you will see that the width gets messed up.
This is because of a div coded in teh component - that I identified and re-styled using

#product-grid > div:first-child > div:first-child{
  width: 100%;
}

with the code:

<div id="product-grid">
              <div className="row">
                <InfiniteScroll ...

[doanhtu07]

For now, my solution is to have a CSS file. Something like below works:

// Example.css

.infinite-scroll-component__outerdiv {
     width: 100%;
     /* ...whatever more styles you want */
}

Then you just import this file to your component file. Hope it helps.

[ankeetmaini]

You can wrap the children in your own div. Like <InfiniteScroll {..all properties}> <div> // your own div // child items </div> </InfiniteScroll>

…

On Wed, 14 Feb 2018 at 11:02 harvinder-ss ***@***.***> wrote: Hi, I am getting an issue as I need to pass width to the outer div . Is there any way to pass ? Thanks., — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#50>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGWDlzKbnPy9Kw2nXNddmU95Ab_Cc267ks5tUm_ngaJpZM4SE0Rh> .

[Anna-Weaver-JL]

I had the same issue - and wrapping the child items didn't help.

The unnamed, unstyled div gets a width property that caused us some issues. I got round it by assigning a style using div:first-child

[Ali-0235]

<div className="cover">
<InfiniteScroll />
</div>
CSS File:
.cover{
//Styling
}

[gilopavani]

para quem ainda precisa resolver o problema. Minha solução foi:

componente

<div className="infinite-scroll-container">
<InfiniteScroll />
</div>

Arquivo CSS

.infinite-scroll-container > div:first-child {
/* this styling goes to the outer div of infinite scroll */
}

Obrigado.
resolveu pra mim.

[d4nielchaves]

Thank you so much, @BlueBeret !