Cannot change CSS inside the pagination component !!

The problem:

I can only change the css of the pagination (class of the component). but I can’t change the css of the li or a or a .active. I tried to put the css in a not scoped or a scoped component I even put it inside the body not scoped css file but it didn’t work I added the properties pageClass and pageLinkClass and tried the same thing but still the sam result.

What should happend:

I should be able to change the style of the pagination component with this code:

<template>
                 .
                 .
                 .
                <div class="my-pagination col-md-offset-3 col-sm-offset-2 col-xs-offset-1">
                  <paginate
                    v-if="numberOfPages > 1"
                    :pageCount="numberOfPages"
                    :clickHandler="getPageData"
                    :prevText="'préc.'"
                    :nextText="'Suiv.'"
                    :containerClass="'pagination'"
                    :pageClass="'page-item'"
                    :pageLinkClass="'page-link-item'">
                  </paginate>
                </div>
                 .
                 .
                 .
</template>
<script>
</script>
...
<style>
                 .
                 .
                 .
    .pagination {
      margin: 5% 25%; // this works
      .page-item {
        .page-link-item .active {
          border-radius: 0px; // this don't work
          position: static !important; // this don't work
          background-color: #ed6528 !important; // this don't work
        }
      }
    }
                 .
                 .
                 .
</style>

[javiscript13]

It works for me if I put the css in a not scoped style section.

[martinnaughton]

I also have the same issue. Even in the style console it does not show the css selectors i used. It does in the html element show the class being used but no CSS is rendered in the style console.

I copied the example exactly out of jsfiddle and it did not render properly like in jsfiddle.

Using chrome 65 and firefox 45 and Vuejs 2.5.2.

This is the second link on google when searching for a fix to this issue.

When i add this link to the top of index.html page it renders as a bootstap pagination style. this is because bootrap has a pagination css class that access all the elements underneath the elements.

<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">

.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}