0

由于显示的行标签的宽度发生变化，我遇到了 Material-UI TablePagination组件按钮从光标下方“转义”的问题：

在此处输入图像描述

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

防止按钮移动的规范方法是什么？

4

1 回答 1

1

事实证明，这主要是一个 CSS 问题。

Material-UI 文档中的示例没有这个问题，因为它有效地将表格分页向右对齐。由于箭头具有一致的宽度（并且它们的右侧没有任何内容），如果您将分页向右对齐，那么它们永远不会移动。

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

分页组件设置为display: flex并使用默认的水平方向。第一个元素“spacer”是一个空元素，具有默认flex-grow属性“1”，即它会以正常速率增长到任何可用的额外空间。它有效地“吃掉”了页脚中的空白水平空间，增长并因此将其他元素推向右侧。

您已将 spacer 的flex-grow属性更改为 0，因此它不会占用多余的空间，并且分页组件有效地向左对齐，这意味着分页箭头的位置取决于它之前的组件的宽度，这意味着它可以根据页面而变化。

（旁注：通过将 flex 容器设置为 ，它们可以达到几乎相同的效果justify-content: flex-end）

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

const StyledTablePagination = withStyles((theme) => ({
  spacer: {
    flex: "0 1 0%"
  },
  caption: {
    width: "75px"
  }
}))(TablePagination);
于 2021-01-23T12:06:19.687 回答