antd 修改 pagination 样式（背景/字体）

最新推荐文章于 2024-06-12 15:13:03 发布

逍康

最新推荐文章于 2024-06-12 15:13:03 发布

阅读量1.2k

点赞数 1

分类专栏：组件库文章标签：前端 javascript css

本文链接：https://blog.csdn.net/lsk222/article/details/129175695

版权

组件库专栏收录该内容

7 篇文章 1 订阅

订阅专栏

这篇文章详细描述了如何使用CSS来定制AntDesign的分页组件（ant-pagination）的样式，包括正常状态、活跃状态、鼠标悬停时的颜色变化以及输入框的样式调整。

摘要由CSDN通过智能技术生成

花了好长时间才搞定

.ant-pagination-item {
  border:1px solid #336ECD;
  background-color: transparent;
    color: white;
  a{
      color: white;
  }
 }

.ant-pagination-item-active{
  border:1px solid #336ECD;
  background-color: transparent;
    color: #FFC600;
  a{
      color: #FFC600;
  }
  
}

.ant-pagination-prev .ant-pagination-item-link{
  border:1px solid #336ECD;
  background-color: transparent;
    color: white;
  a{
      color: #FFC600;
  }  
}

.ant-pagination-next .ant-pagination-item-link{
  border:1px solid #336ECD;
  background-color: transparent;
    color: white;
  a{
      color: #FFC600;
  }  
}

.ant-pagination-item:hover{
  border:1px solid #336ECD;
   background-color: transparent;
  a{
      color: #00FFF7;
  } 
}
.ant-pagination-item-link:hover{
  border-color: #00FFF7;
  span{
      color: #00FFF7;
  } 
}
.ant-select:not(.ant-select-disabled):hover .ant-select-selector{
  border-color: #00FFF7;
}
.ant-pagination-options-quick-jumper input:hover{
  border-color: #00FFF7;
}
.ant-select-focused.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
  border-color: #00FFF7;
}

.ant-pagination-options-quick-jumper {
  color: white;
  input {
     border:1px solid #336ECD;
    background-color: transparent;
    color: #FFC600;
  }
}

有时候该样式确实比较麻烦