React Material-UI - 在 TablePagination 组件中设置显示行标签的样式

Question

我在光标下的 Material-UI TablePagination 组件按钮 'escaping' 遇到了问题，原因是显示行标签的宽度:

Here 是 Material-UI 文档中的修改示例。要重现该问题，请单击 'Next Page' 按钮并看到它向右移动。

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

Answer 1

这主要是 CSS 问题。

The example in the Material-UI docs 没有这个问题，因为 有效地 将 table 分页对齐 正确的 .由于箭头具有一致的宽度（并且它们的右边没有任何东西）如果您将分页向右对齐那么它们就不会移动。

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

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

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

（旁注：他们可以通过将 flex 容器设置为 justify-content: flex-end 来实现几乎相同的效果）

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

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

React Material-UI - styling displayed rows label in TablePagination component