The select style of the list sticks out of the border
I'm using next.js and mui (material-ui) in my project. The component is written in the following structure.
<Paper>
<List>
..
</List>
</Paper>
When the list is scrolled, there is a problem that the select style of the <ListItemButton> component is out of the component's rounded border.
How can I apply border-radius to <ListItemButton> component to view it naturally when scroll occurred? or Is there another CSS trick?
Solution 1:
It is just a CSS thing. You want the wrapper to have overflow: hidden applied (MDN). Otherwise the children li elements have their background color bleed out.
See below for an example:
.overflow {
overflow: hidden;
}
.list {
border: 1px solid grey;
border-radius: 16px;
}
/* Misc */
.list li { padding: 4px }
.list li:nth-child(odd) { background-color: cyan }
.list li:nth-child(even) { background-color: lime }
p { margin-bottom: 2px }
ul {
list-style: none;
padding: 0;
margin: 0;
}<p>This does <em>not</em> have <code>`overflow: hidden`</code> on the parent <code>ul</code>.</p>
<ul class="list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
</ul>
<p>This <em>does</em> have <code>`overflow: hidden`</code> on the parent <code>ul</code>.</p>
<ul class="list overflow">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
</ul>