ElementPlus的组件（Select,DatePick等）弹窗样式修改

最近做一个大屏项目，框架还是基于elementPlus,只是大屏项目大多时候都是暗色调，与默认的element组件库的主题肯定不一致的，所以需要手动的去调整样式。

基础的样式隔离

因为大屏只是整个项目的一小块，其余板块还是需要使用默认的组件库，所以样式还是需要隔离开，首先我们肯定不能这样：

:root {
    --el-color-white: #ffffff;
    --el-color-black: #000000;
    --el-color-primary-rgb: 64, 158, 255;
    --el-color-success-rgb: 103, 194, 58;
    --el-color-warning-rgb: 230, 162, 60;
    --el-color-danger-rgb: 245, 108, 108;
    --el-color-error-rgb: 245, 108, 108;
    --el-color-info-rgb: 144, 147, 153;
    --el-font-size-extra-large: 20px;
    --el-font-size-large: 18px;
    --el-font-size-medium: 16px;
    --el-font-size-base: 14px;
    --el-font-size-small: 13px;
    --el-font-size-extra-small: 12px;
    --el-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    --el-font-weight-primary: 500;
    --el-font-line-height-primary: 24px;
    --el-index-normal: 1;
    --el-index-top: 1000;
    --el-index-popper: 2000;
    --el-border-radius-base: 4px;
    --el-border-radius-small: 2px;
    --el-border-radius-round: 20px;
    --el-border-radius-circle: 100%;
}

如果直接在:root里面去修改默认的变量，首先，你会发现页面组件不会发生改变，原因在于你样式里的scoped属性,vue中的 scoped 属性，其实就是给每一个dom节点元素都添加了不重复的自定义属性（如：data-v-6810cbe5）,然后编译时再给样式的末尾添加属性选择器进行样式私有化如.btn[data-v-6810cbe5]。

所以我首先需要去掉scoped属性，发现样式生效了，然后查看其他页面，发现也生效了。。。

这时我们需要裹上一层本页面的顶层选择器，比如：

.bg {
    --el-fill-color-blank: rgba(6, 47, 108, 0.18);
    --el-text-color-regular: #82BCFF;
    --el-border-color: #82BCFF;
    --el-text-color-placeholder: #82BCFF;
    --el-bg-color-overlay: rgba(20, 64, 115, 0.8);
}

基本的样式隔离就解决了。

弹窗类组件的样式修改

然后下一个问题出现了

这种弹窗类的组件，弹窗的部分样式无法生效，就算你找到了那个class，包裹上顶层选择器，也无法让他的样式改变，这又是什么原因呢？

这个要提到我们element的机制问题，他会把弹窗类组件，默认的放到body最外层，就像我们vue3的内置组件Teleport一样，<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

所以解决这个问题的方法也很简单，我们只需要在el-select等组件上加上一个属性  :teleported="false"，阻止它发送到外层，这样我们的顶层选择器就生效了。

<el-date-picker v-model="value1" :teleported="false" type="date" placeholder="--年-月"
                        size="default" />

然后我们就可以根据自己的设计图修改相应的class了！