样式化 npm vuejs-paginate 组件

Question

我正在使用 npm 包https://www.npmjs.com/package/vuejs-paginate 在 vuejs 应用程序中处理分页。

我想为这个分页组件设置样式。 当用户将鼠标悬停在页码按钮上时，我的样式成功地将页码按钮的背景设置为黄色，但未能将当前页面的背景设置为绿色。为什么？

这是我的带有道具的组件标签。

 <paginate
    :pageCount="totalPages"
    :click-handler="paginateCallback"
    :prevText="'Prev'"
    :nextText="'Next'"
    :containerClass="'pagination'"
    class="pagination"
    v-model="pageNumber"
  ></paginate>

这里是 css...

.pagination a {
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
    background-color: white;
  }
  
.pagination  a.active {
    background-color: green;
  }
  
.pagination  a:hover:not(.active) {background-color: yellow;}

.pagination   a:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .pagination a:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

顺便说一句，如果是相关信息，应用程序在其他地方使用bootstrap-vue。

感谢下面的第一个答案，我能够解决这个问题。 这是将 active-class 属性添加到组件后的工作 css...

 .pagination li {
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid #ddd;
    color: white;
    background-color: white;
    font-size: 1em;
  }
  .pagination li.pagination-active {
    background-color: green;
  }
  
.pagination  li:hover:not(.active) {background-color: yellow;}

但是，现在，在用户再次单击页面上的任意位置之前，活动页面按钮的编号周围有一个边框。我们怎样才能消除这个边界？

Answer 1

正如documentations 所说：您可以设置一个active class 属性并设置该类的样式。请参阅上面链接中的道具。

    <paginate
    :pageCount="totalPages"
    :click-handler="paginateCallback"
    :prevText="'Prev'"
    :nextText="'Next'"
    :active-class="myActiveBtn"
    :containerClass="'pagination'"
    class="pagination"
    v-model="pageNumber"
  ></paginate>

风格：

.myActiveBtn{
  background-color: green;
 }