列表的选择样式伸出边框答案

【问题标题】：The select style of the list sticks out of the border列表的选择样式伸出边框
【发布时间】：2022-01-21 02:19:54
【问题描述】：

我在我的项目中使用 next.js 和 mui (material-ui)。该组件采用以下结构编写。

<Paper>
  <List>
  ..
  </List>
</Paper>

列表滚动时出现<ListItemButton>组件的选择样式超出组件圆角边框的问题。

如何将border-radius 应用于<ListItemButton> 组件以在滚动发生时自然地查看它？或者还有其他 CSS 技巧吗？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

这只是一个 CSS 的东西。您希望包装器应用 overflow: hidden (MDN)。否则，li 子元素的背景颜色会溢出。

示例如下：

.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>

【讨论】：