代码之家  ›  专栏  ›  技术社区  ›  Ali Tourani

在Ant.Design中个性化ReactJS分页风格-有什么方法吗?

  •  0
  • Ali Tourani  · 技术社区  · 6 年前

    我正在开发一个基于ReactJS的网站。在不同的库中,我选择了Ant Design(antd),因为它的元素非常漂亮。但是,我确实需要更改一些元素样式。在分页组件中,我选择了简单模式,如下图所示:

    Simple Pagination component

    此组件的代码为:

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

    有什么方法可以更改此组件的格式吗?像“2从5”而不是“2/5”?我知道这和CSS无关!

    1 回复  |  直到 6 年前
        1
  •  1
  •   Leon    6 年前

    恐怕没有办法改变 / 去别的地方,比如 from .

    斜杠本身是硬编码的 this package here . 您可以尝试在该回购协议中打开一个问题,或者提交一个拉取请求,在其中您自己添加了选项。

        2
  •  0
  •   Basia Bowens    5 年前

    我可以使用scss重写斜杠并将其替换为“of”字符串,代码:

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

    通过将内容更新为字符串 of . 我附上了一张截图。