vue ant design drawer 样式设置问题请教？

Question

<a-drawer
    v-model:visible="showElement.showTerms"
    class="drawer"
    title="Basic Drawer"
    :headerStyle="{'background-color':$selectColor,'border-radius':0}"  // 这里设置样式，无法调到 scss  :$selectColo这个变量。 所以要想办法写成外联的。
    placement="right"
    width ="60%" 
    @after-visible-change=""
>

但是外联怎么弄我都没改成。

 :deep(.ant-drawer-header){
    background-color: rgb(233, 33, 33)!important;
  }
:deep(.ant-drawer-content){
   background-color: rgb(233, 33, 33)!important;
}
.......
试了好多元素，就是不生效，改不动。
用官方的样式设置方法，只能内联改动。
如果绕一下，加js也是用变量的，但我是想请教 怎么不用js 只通过css 来达到外联更改样式的效果 

Answer 1

参考下这个方法是否生效问题描述
antd-vue 修改对话框 modal 的样式

解决方法

1、template 中添加添加一下

<div ref="yourModal"></div>
:getContainer="() => $refs.yourModal"

2、css 中在类名前加 /deep/：

<div ref="yourModal"></div>
<a-modal v-model="visible" :title="name" @ok="handleOk" @cancel="handleClose"
  :getContainer="() => $refs.yourModal"
  >
  <span>这是一个 modal</span>
  <template slot="footer">
    <a-button key="close" @click="handleClose">
      关闭
    </a-button>
  </template>
</a-modal>

/deep/ .ant-modal {
  width: 500px !important;
}

API getContainer
指定 Modal 挂载的 HTML 节点，默认挂载到 body。
修改这个规则，把 modal 挂载到 div，配合 /deep/ 即可修改样式.

css /deep/ 深度选择器

参考链接：

【antd-vue】修改对话框 modal 的样式_落落叶叶无声的博客-CSDN博客_antd怎么修改modal框样式 问题描述antd-vue 修改对话框 modal 的样式解决方法template 中添加添加一下<div ref="yourModal"></div>:getContainer="() => $refs.yourModal"css 中在类名前加 /deep/代码示例<div ref="yourModal"></div><a-modal v-model="visible" :title="name" @ok="handleOk" https://blog.csdn.net/u012557814/article/details/120508087

---

如有问题及时沟通