在Ant.Design中个性化ReactJS分页样式-有什么办法吗？

Question

我正在开发一个基于ReactJS的网站。在不同的库中，由于其漂亮的元素，我选择了Ant-Design（antd）。但是，我实际上确实需要更改某些元素样式。在分页组件中，我选择了简单模式，如下图所示：

此组件的代码为：

<Pagination simple defaultCurrent={2} total={50} />

有什么办法可以更改此组件的格式？像是“ 5中的2”而不是“ 2/5”？我知道这与CSS无关！

Answer 1

恐怕没有内置的方法可以将/更改为其他内容，例如from。

斜杠本身被硬编码在this package here中。您可以尝试在该存储库中打开一个问题，或者提交一个拉请求，以在其中添加选项。

Answer 2

我能够使用scss，代码重写斜杠并将其替换为'of'字符串：

 .ant-pagination-simple-pager {
  .ant-pagination-slash {
    visibility: hidden;
  }
  span::after {
    content: 'of';
    margin-left: 0;
    visibility: visible;
  }
}

通过将内容更新为字符串of。我已经附上了屏幕截图。