elementplus修改dialog弹窗样式

效果

当设置了append-to-body， 无法在scope下通过样式穿透设置dialog

需要在<script></script>下写class，不能带scope。

//styleConfig.scss


@mixin white-theme() {
    --container-bg-color: #fff;
    --blank-bg-color: #f9f9f9;
    --divider-color: #cccccc;
    --samebg-btn-bg-color: #192038;
    --btn-border-color: #3366ff;
    --tabs-tags-bg-color: #fff;
    --tabs-tags-underline-color: #4c4d4f;
    --monitor-btn-bg-color: var(--el-button-bg-color);
    --monitor-btn-border-color: var(--el-button-border-color);
    --box-shadow-color: #8e8e8e;
}

@mixin dark-theme() {
    --container-bg-color: #222b45;
    --blank-bg-color: #151a30;
    --divider-color: #151a30;
    --samebg-btn-bg-color: #192038;
    --btn-border-color: #3366ff;
    --tabs-tags-bg-color: #121330;
    --tabs-tags-underline-color: #4c4d4f;
    --monitor-btn-bg-color: #004bff;
    --monitor-btn-border-color: transparent;
}

@mixin nav-dark-theme() {
    
    --tabs-tags-bg-color: #121330;
    --tabs-tags-underline-color: #4c4d4f;
    --monitor-btn-bg-color: #004bff;
    --monitor-btn-border-color: transparent;
    --nav-box-bg-color: #222b45;
    --nav-font-color: #fff;
    --nav-divider-color: #151a30;
    --tags-btn-border-color: #3366ff;
    --tags-btn-bg-color: #192038;
}

@mixin card-colors () {
    --card-bg-blue-color1: #f0f8fe;
    --card-bg-blue-color2: #f1f5ff;
    --card-bg-gray-color: #f0f2f4;
    --card-bg-green-color1: #f0fafd;
    --card-bg-pink-color1: #fef2f0;
    --card-bg-yellow-color1: #fff4ed;
    --card-bg-purple-color1: #f3f1ff;

}

@mixin modify-dialog-style() {
    border-radius: 20px;
    .el-dialog__header{
        border-radius: 20px 20px 0 0;
        border-bottom: 1px solid #ccc;
        background: linear-gradient(135deg, #ffffff 0%, #e3f2fd 100%);
        margin-right: 0 !important;
    }
}

@mixin card-shadow-light(){
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
}



$navHeight: 64px;
$navboxBgColor: var(--nav-box-bg-color);
$navfontColor: var(--nav-font-color);
$navdividerColor: var(--nav-divider-color);
$tagsbtnBorderColor: var(--tags-btn-border-color);
$tagsbtnBgColor: var(--tags-btn-bg-color);

$boxBgColor: var(--container-bg-color);
$blankBgColor: var(--blank-bg-color);
$fontColor: var(--el-text-color-primary);
$dividerColor: var(--divider-color);
$btnBgColor: var(--samebg-btn-bg-color);
$btnBorderColor: var(--btn-border-color);
$tagsViewBgColor: var(--tabs-tags-bg-color);
$tagsViewUnderlineColor: var(--tabs-tags-underline-color);
$monitorBtnBgColor: var(--monitor-btn-bg-color);
$monitorBtnBorderColor: var(--monitor-btn-border-color);

$boxShadowColor: var(--box-shadow-color);
$descriptionsBorderColor: #cedcff;


html.dark {
    
}

html {
    @include white-theme();
    @include nav-dark-theme(); /*后覆盖前*/
    @include card-colors();
    
}

.card-el-shadow{
    @include card-shadow-light();
}
.card-notop-shadow{
    box-shadow: 0px 0px 6px 2px $boxShadowColor;
    // box-shadow: 3px 5px 3px 0px $boxShadowColor; 
    //h-shadow：水平阴影的位置，可以为正值（向右）或负值（向左）。v-shadow：垂直阴影的位置，可以为正值（向下）或负值（向上）。blur：阴影的模糊程度，其值越大，阴影边缘越模糊。spread：阴影的尺寸，其值可以为正值（阴影扩大）或负值（阴影缩小）。color：阴影的颜色。
}