我遇到了 Material-UI TablePagination 组件按钮从光标下方“转义”的问题，原因是显示的行标签的宽度发生了变化：
Here 是来自 Material-UI 文档的修改示例。要重现此问题，请单击“下一页”按钮并看到它向右移动。
防止按钮移动的规范方法是什么？
【问题讨论】：
标签： css reactjs pagination material-ui react-with-styles
这主要是一个 CSS 问题。
The example in the Material-UI docs 没有这个问题，因为它有效地将表格分页对齐到右。由于箭头具有一致的宽度（并且它们的右侧没有任何内容），如果您将分页向右对齐，那么它们永远不会移动。
您在示例中所做的是覆盖用于实现这种“正确”对齐的分隔符。
分页组件设置为display: flex，并使用默认的水平方向。第一个元素“spacer”是一个空元素，带有默认的flex-grow 属性“1”，即它将以正常速率增长到任何可用的额外空间。它有效地“吞噬”了页脚中的空白水平空间，不断增长，从而将其他元素推向右侧。
您已将分隔符的 flex-grow 属性更改为 0，因此它不会占用多余的空间，并且分页组件有效地向左对齐，这意味着分页箭头的位置取决于来的组件的宽度在它之前，这意味着它可以根据页面而变化。
（旁注：他们可以通过将 flex 容器设置为 justify-content: flex-end 来实现几乎相同的效果）
如果您确实想要左侧的分页，如果您不想调整右侧项目的位置，则需要将分页箭头左侧的项目设置为固定。例如：
const StyledTablePagination = withStyles((theme) => ({
spacer: {
flex: "0 1 0%"
},
caption: {
width: "75px"
}
}))(TablePagination);
【讨论】：