Css 反应材质UI-设置表格分页组件中显示行标签的样式

由于显示的行标签的宽度发生变化，我遇到了材料UI表格分页的问题组件按钮从光标下“转义”：

是材料UI文档中的修改示例。要重现该问题，请单击“下一页”按钮，并看到它向右移动

---

防止按钮移动的标准方法是什么？

这主要是CSS问题

没有此问题，因为它有效地将表分页与右侧对齐。由于箭头具有一致的宽度（并且在其右侧没有任何内容），如果将分页对齐到右侧，则箭头永远不会移动

您在示例中所做的是覆盖用于实现“正确”对齐的垫片

分页组件设置为

display:flex

，并使用默认的水平方向。第一个元素“间隔符”是一个空元素，它带有默认的

flex grow

属性“1”，即它将以正常速率增长到任何可用的额外空间。它有效地“吞噬”了页脚中的空白水平空间，从而使其他元素向右移动

您已将间隔符的

flex grow

属性更改为0，因此它不会占用额外的空间，分页组件也会有效地向左对齐，这意味着分页箭头的位置取决于它前面的组件的宽度，这意味着它可以根据页面的不同而变化

（旁注：通过将flex容器设置为

justify content:flex end

，它们可以达到几乎相同的效果）

如果确实希望左侧分页，则如果不希望调整右侧项目的位置，则需要将分页箭头左侧的项目设置为固定。例如：

const StyledTablePagination = withStyles((theme) => ({
  spacer: {
    flex: "0 1 0%"
  },
  caption: {
    width: "75px"
  }
}))(TablePagination);

---

你试过设置固定宽度吗？谢谢你的回答。当我将width参数添加到CodeSandbox示例中时，它似乎会影响“每页行数”下拉列表和“1-5/30”标题。问题在于选择组件“跑开”了标题，破坏了布局。有没有一种解决方案可以只针对“1-5/30”标题，而不破坏布局？你从哪里得到“caption”类名的？我在MaterialUI项目中创建了一个pull请求，使这两个标签可以独立寻址。我认为目前它们都有相同的类，所以不能单独修改：看起来PR已经被接受，我们将能够单独处理底层组件的样式。哇，很好的主动性。这是一个快速的公关和批准。您可能会使用：last child或：last of type将一个或另一个作为目标，但单独的类更好。