材料ui分页中的自定义下一个和上一个按钮答案

【问题标题】：Custom next and prev button in material ui pagination材料ui分页中的自定义下一个和上一个按钮
【发布时间】：2020-11-05 01:47:02
【问题描述】：

我想在 material-ui 分页中使用“下一个”和“上一个”文本而不是下一个和上一个图标。我没有找到任何相同的道具。你们能给我一些解决方法吗？

【问题讨论】：

在他们的文档中，他们在这里有一个自定义分页部分：material-ui.com/components/tables/#custom-pagination-actions。您可以将 IconButtons 更改为带有文本的普通按钮。
这是一个表格分页，我说的只是分页组件
这和 React 的 material-ui 库有关系吗？或者它是一个特殊的图书馆？如果不是material-ui（material-ui.com），请去掉标签并链接到您用于分页的库。
这是一个材质ui组件material-ui.com/components/pagination，这就是我包含标签的原因。

标签： reactjs pagination material-ui

【解决方案1】：

有类似的问题。在 SO 上注册了一个帐户，以便我可以回答:)

一种可能的解决方案是添加一个 :after 和 :before 伪选择器。这是一个使用 SCSS 的代码 sn-p。

确保将伪选择器添加到按钮，以防您希望它可点击。

 .MuiPagination-root {
   .MuiPagination-ul {
      flex-wrap: nowrap;
      li {
        &:first-child {
          flex-basis: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          > button::after {
            margin-left: 10px;
            content: 'previous';
          }
        }
        &:last-child {
          flex-basis: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          > button::before {
            margin-right: 10px;
            content: 'next';
          }
        }
      }
    }
  }

【讨论】：