樣式化 npm vuejs-paginate 組件

Question

我正在使用 npm package 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。

感謝下面的第一個答案，我能夠解決這個問題。 這是將活動類道具添加到組件后的工作 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

正如文檔所說：有一個active class道具，您可以設置和設置 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;
 }