I want to produce some spacing between the Panels of Collapse component offered in antd. By default the Panels are stuck to each other vertically. I would like some spacing between these Panels.
What I've tried:
Adding a marginTop in styling of each Panel
Using on top of the Panel code.
Both of these approaches break the Panel as the collapsible down Arrow disappears and the Panels are still stuck to each other.
My code:
<Collapse
expandIconPosition = 'right'
style = {{backgroundColor:"#ffff"}}
>
{products.map((product,index) =>
(
<div style={{marginTop:"1px"}}>
<Panel
key = {index}
header = {
<ProductDetails product = {product} index = {index}/>
}>
<div>Lorem Ipsum</div>
</Panel>
</div>
))}
</Collapse>
