css通过全局设置类名自定义控制样式

前言

项目目前根据UI设计，出了几种配色的element-ui中table、pagination的样式，也不是整体换肤功能，就想着通过给全局class类名，来操作table下面的所有样式，上代码

// src文件夹下创建style文件夹，style下面创建scss文件夹和index.scss文件
// scss下面新建table.scss和pagination.scss文件夹
// 绑定在#app上，因为这里使用:deep加重权级在打包后发布线上版本有时会出现问题
// 在table.scss中
#app {
    // 灰色table
    .dark-table {
        .el-table {
            color: #dddddd;
            background-color: rgba(37, 37, 37, 0.5);
            border-radius: 6px;
            font-size: 12px;
            tr {
                color: #dddddd;
                background-color: rgba(37, 37, 37, 0.5);
            }
            tr:hover > td {
                background-color: #383844 !important;
            }
            tr.current-row > td {
                background-color: #383844 !important;
            }
            th {
                color: #dddddd;
                font-weight: normal;
                background-color: rgba(37, 37, 37, 0.5);
                border-bottom: 1px solid #333333;
            }
            td {
                border-bottom: 1px solid #333333;
            }
            .el-table__inner-wrapper::before {
                height: 0;
            }
        }
    }

    // 透明table
    .transparent-table {
        .el-table {
            color: #dddddd;
            background-color: rgba(37, 37, 37, 0.5);
            border-radius: 6px;
            font-size: 12px;
            tr {
                color: #dddddd;
                background-color: transparent;
            }
            tr:hover > td {
                background-color: #383844 !important;
                // background-color: transparent !important;
            }
            tr.current-row > td {
                // background-color: #383844 !important;
                background-color: transparent !important;
            }
            th {
                color: #dddddd;
                font-weight: normal;
                background-color: rgba(37, 37, 37, 0.5);
                border-bottom: 1px solid #333333;
            }
            td {
                border-bottom: 1px solid #333333;
            }
            .el-table__inner-wrapper::before {
                height: 0;
            }
        }
    }
}

// 在pagination.scss中
#app {
    // 灰色翻页器
    .dark-pagination {
        .el-pagination {
            .btn-prev {
                background-color: #333333;
                .el-icon {
                    font-weight: bolder;
                    font-size: 18px;
                }
            }
            .btn-prev:hover:not([disabled]) {
                border: 1px solid #6e6ef7;
            }

            .btn-next {
                background-color: #333333;
                .el-icon {
                    font-weight: bolder;
                    font-size: 18px;
                }
            }
            .btn-next:hover:not([disabled]) {
                border: 1px solid #6e6ef7;
            }
            .el-pager {
                li {
                    background-color: #333333;
                    color: #c4c4c4;
                }
                li:not(.is-disabled).is-active {
                    background-color: #333333;
                    border: 1px solid #6e6ef7;
                    color: #6e6ef7;
                }
            }
        }
    }

    // 透明翻页器
    .transparent-pagination {
        .el-pagination {
            .btn-prev {
                background-color: rgba(37, 37, 37, 0.5);
                .el-icon {
                    font-weight: bolder;
                    font-size: 18px;
                }
            }
            .btn-prev:hover:not([disabled]) {
                border: 1px solid #18BAE3;
            }

            .btn-next {
                background-color: rgba(37, 37, 37, 0.5);
                .el-icon {
                    font-weight: bolder;
                    font-size: 18px;
                }
            }
            .btn-next:hover:not([disabled]) {
                border: 1px solid #18BAE3;
            }
            .el-pager {
                li {
                    background-color: rgba(37, 37, 37, 0.5);
                    color: #c4c4c4;
                }
                li:not(.is-disabled).is-active {
                    background-color: rgba(37, 37, 37, 0.5);
                    border: 1px solid #18BAE3;
                    color: #18BAE3;
                }
            }
        }
    }
}

// 在index.scss中引入
@import "./scss/pagination.scss";
@import "./scss/table.scss";

// 在main.js中引入index.scss
import './style/index.scss' // 全局样式

// 项目中使用全局类名样式
<div class="transparent-table transparent-pagination">
	<el-table :data="analyseList" @row-click="handleRowClick">
            <el-table-column prop="createTime" :label="t('table.time')"></el-table-column>
            <el-table-column prop="customerName" :label="t('table.customerName')"></el-table-column>
            <el-table-column prop="code" :label="t('table.code')"></el-table-column>
            <el-table-column prop="name" :label="t('table.analyseData')"></el-table-column>
            <el-table-column prop="type" :label="t('table.analyseType')"></el-table-column>
            <el-table-column prop="operation" :label="t('table.operation')"></el-table-column>
            <el-table-column prop="remark" :label="t('table.remark')"></el-table-column>
	</el-table>
</div>

这样就使用成功了，想实现不同的样式只需要给不同的类目即可，最后展示文件夹和效果图