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 来达到外联更改样式的效果