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:
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>
The only way i've found was to make multiple "Collapse" components with single "Panel" on each
(instead of single Collapse with multiple panels in it).
You can specify the space between them with "Space" component if you want.
Working example:
https://codesandbox.io/s/antd-collapse-with-spacing-64bbgm?file=/src/App.js