如何在bootstrap-vue中改变分页的颜色？

<b-pagination class="custom-pagination" v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>

.custom-pagination .page-item.active .page-link {
  background-color: #ff0000; /* 设置活动页的背景颜色 */
  border-color: #ff0000; /* 设置活动页的边框颜色 */
  color: #ffffff; /* 设置活动页的文字颜色 */
}

.custom-pagination .page-link {
  background-color: #ffffff; /* 设置非活动页的背景颜色 */
  border-color: #dddddd; /* 设置非活动页的边框颜色 */
  color: #333333; /* 设置非活动页的文字颜色 */
}

.custom-pagination .page-link:hover {
  background-color: #eeeeee; /* 设置鼠标悬停时的背景颜色 */
  border-color: #cccccc; /* 设置鼠标悬停时的边框颜色 */
  color: #333333; /* 设置鼠标悬停时的文字颜色 */
}