在Ant.Design中個性化ReactJS分頁樣式-有什么辦法嗎？

Question

我正在開發一個基於ReactJS的網站。 在不同的庫中，由於其漂亮的元素，我選擇了Ant-Design（antd）。 但是，我實際上確實需要更改某些元素樣式。 在分頁組件中，我選擇了簡單模式，如下圖所示：

該組件的代碼是：

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

有什么辦法可以更改此組件的格式嗎？ 像是“ 5中的2”而不是“ 2/5”？ 我知道這與CSS無關！

Answer 1

恐怕沒有內置的方法可以將/更改為其他內容，例如from 。

斜杠本身在此包中進行了硬編碼。 您可以嘗試在該存儲庫中打開一個問題，或者提交一個拉請求，您可以在其中添加選項。

Answer 2

我能夠覆蓋斜線，並使用scss代碼將其替換為'of'字符串：

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

通過更新內容，以字符串of 。 我已經附上了截圖。