前端 - vue3项目使用element plus中的el-drawer组件，想自定义.el-drawer__header和.el-drawer__body的样式，使用:deep()为啥不起作用呢？

Question

vue3项目使用element plus中的el-drawer抽屉组件，想自定义.el-drawer__header和.el-drawer__body的样式，使用:deep()为啥不起作用呢？
比如想调整el-drawer抽屉组件的默认标题下外边距及标题字体颜色，和内容区域的默认内边距宽度

代码如下图：


环境版本如下图：

其他如el-tabs等组件，使用:deep自定义重写样式都是可以的，为啥到了这个el-drawer组件就不行了呢？

Answer 1

看下是不是这个原因，组件要有个根节点才生效

https://blog.csdn.net/wangyining070205/article/details/127156652

Answer 2

::v-deep .el-drawer__header {
background-color: red;
}
这样呢