【Vue】vueのページネーションライブラリ「vue-paginate」にてスタイルが適用されない

#vueのページネーションライブラリ「vue-paginate」にてスタイルが適用されない

.left-arrow{
  margin: 1rem;
}

.right-arrow{
  margin: 1rem;
}

.number{
  margin: 1rem;
}

試しに上記のようにcssを適用させてもうまく適用されません・・

調べてみるとこちらの記事によるとpropsで直接HTMLを渡すとありますが、
どのように記述したらいいのかわかりません・・

vue-paginateのスタイルをカスタマイズしたい

分かる方いらっしゃいましたらお力添えをいただきたいです。

よろしくお願い致します。

<template>
  <div>
    <Header />
    <Post />
    <div class="post">
      <h2 class="post-tll neon">投稿一覧</h2>
      <div class="post-inner">
        <div class="post-items">
          <paginate name="paginate-log" :list="allData" :per="12">
            <List
              v-for="(list, index) in paginated('paginate-log')"
              :index="index"
              :list="list"
              :key="list.id"
            />
          </paginate>
          <paginate-links
            for="paginate-log"
            class="pagination"
            :show-step-links="true"
          ></paginate-links>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import firebase from "firebase";
import Header from "@/components/header.vue";
import Post from "@/components/post.vue";
import List from "@/components/list.vue";
import Vue from "vue";
import VuePaginate from "vue-paginate";
Vue.use(VuePaginate);

export default {
  data() {
    return {
      title: "",
      contents: "",
      image: "",
      allData: [],
      paginate: ["paginate-log"],
    };
  },
  components: {
    Header,
    Post,
    List,
  },

  created() {
    firebase
      .firestore()
      .collection("posts")
      .orderBy("time", "desc")
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.allData.push({ ...doc.data(), id: doc.id });
          console.log(this.allData);
        });
      });
  },
};
</script>

#追記1

数日回答を得られなかった為、以下サイトにも掲載させて頂いております。

【Vue】vueのページネーションライブラリ「vue-paginate」にてスタイルが適用されない

#追記2

          <ul data-v-7c46b23c="" class="pagination paginate-links paginate-log">
            <li class="left-arrow disabled"><a>«</a></li>
            <li class="number active"><a>1</a></li>
            <li class="number"><a>2</a></li>
            <li class="number"><a>3</a></li>
            <li class="right-arrow"><a>»</a></li>
          </ul>

ul.paginate-links > li.left-arrow > a {
  margin: 1rem;
}

ul.paginate-links > li.right-arrow > a {
  margin: 1rem;
}

ul.paginate-links > li.number > a {
  margin: 1rem;
}

ul.paginate-links > li.ellipses > a {
  margin: 1rem;
}

Web上からchromeのデバックツールにて表示されたものを試しに貼り付けて表示させたらCSSは適用されましたが
cssが適用されたのみでページを押しても動かない状況です。。