如何移除Ant Design Pagination组件的焦点、背景色及悬停效果？

方法一：全局CSS样式覆盖 #

直接通过覆盖Ant Design内置类名修改样式，在全局样式文件（如index.css）中添加以下代码：

/* 移除分页项的悬停背景色 */
.ant-pagination-item:hover {
  background-color: transparent !important;
  border-color: #d9d9d9 !important; /* 保留默认边框色，可按需调整 */
}

/* 移除分页项的焦点样式 */
.ant-pagination-item:focus,
.ant-pagination-item:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* 移除非激活状态分页项的背景色（按需选择） */
.ant-pagination-item:not(.ant-pagination-item-active) {
  background-color: transparent !important;
}

/* 移除分页按钮（上一页/下一页）的悬停、焦点样式 */
.ant-pagination-prev:hover,
.ant-pagination-next:hover,
.ant-pagination-prev:focus,
.ant-pagination-next:focus {
  background-color: transparent !important;
  border-color: #d9d9d9 !important;
  outline: none !important;
  box-shadow: none !important;
}

注：使用!important是为了确保样式优先级高于Ant Design默认样式，若项目已有样式优先级策略，可根据情况调整。

方法二：局部样式（CSS Modules） #

若不想污染全局样式，可在组件中使用CSS Modules：

1. 创建样式文件（如PaginationCustom.module.css）：

.paginationItem:hover {
  background-color: transparent;
  border-color: #d9d9d9;
}

.paginationItem:focus,
.paginationItem:focus-visible {
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

.paginationPrev:hover,
.paginationNext:hover,
.paginationPrev:focus,
.paginationNext:focus {
  background-color: transparent;
  border-color: #d9d9d9;
  outline: none;
  box-shadow: none;
}

2. 在组件中引入并使用：

import styles from './PaginationCustom.module.css';
import { Pagination } from 'antd';

const CustomPagination = () => {
  return (
    <Pagination
      className={{
        item: styles.paginationItem,
        prev: styles.paginationPrev,
        next: styles.paginationNext
      }}
      defaultCurrent={1}
      total={50}
    />
  );
};

export default CustomPagination;

方法三：Ant Design v5 自定义主题（推荐） #

如果使用Ant Design v5，可通过ConfigProvider全局配置主题token，无需额外编写CSS：

import { ConfigProvider, Pagination } from 'antd';

const App = () => {
  return (
    <ConfigProvider
      theme={{
        components: {
          Pagination: {
            itemHoverBg: 'transparent',
            itemFocusBg: 'transparent',
            itemActiveBg: '#165DFF', // 保留激活项背景色，若需移除可设为transparent
            itemHoverBorderColor: '#d9d9d9',
            itemFocusBorderColor: '#d9d9d9',
            outlineWidth: 0,
            boxShadow: 'none',
          },
        },
      }}
    >
      <Pagination defaultCurrent={1} total={50} />
    </ConfigProvider>
  );
};

export default App;

内容的提问来源于stack exchange，提问作者AnZoro Karto