[Vue3 + TS + Vite] CSS穿透

漆黑的莫莫2024-07-07 22:23

以 Element-Plus UI 中的 <el-drawer> 为例

方法一

Template中

typescript 复制代码

<el-drawer>

CSS中

typescript 复制代码

<style lang="scss" scoped>
:deep(.el-drawer__header) {
    margin: 0px 0px 0px 0px; /*上 右 下 左*/
    box-sizing: border-box;
    padding: 0px 0px 0px 0px; /*上 右 下 左*/
}
</style>

方法二（没有什么是加个中间层解决不了的）

Template中

typescript 复制代码

<div class="el-drawer-box">
	<el-drawer>
</div>

CSS中

typescript 复制代码

<style lang="scss" scoped>
.el-drawer-box:deep(.el-drawer__header) {
    margin: 0px 0px 0px 0px; /*上 右 下 左*/
    box-sizing: border-box;
    padding: 0px 0px 0px 0px; /*上 右 下 左*/
}
</style>

参考链接：
设置elementPlus抽屉组件的header样式