How to change background color of el-pagination

Question

I using el-pagination in a dark page，I want to change its background color to transparent。

when i not use props of 'background', the background color of el-pagination is white.

it looks like this: https://i.loli.net/2019/08/26/YnjtfmglONRBiCM.png (sorry i can't add image)

my code:

<el-pagination
        v-if="isPaging"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :total="totalSize"
        layout="total, sizes, prev, pager, next, jumper"
        class="col-12 d-flex justify-content-end flex-wrap">
</el-pagination>

How can I change the background color to transparent

Answer 1

You should be able to do this simply with css, eg by using the below:

.el-pagination .number,
.el-pagination button:disabled,
.el-pagination .btn-next {
  background:transparent;
}

If you're using scoped css in your components, you might have to use v-deep to apply the css from it to the child component: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Answer 2

If what you mean is to override the original color, you can try adding this line in your css file:

.el-pager li {
    background: transparent !important;
}

or inside your style tag.