全局修改:style样式去掉scoped就可以达到效果,例:

<style>
/* 导航栏样式更改 */
.el-submenu .el-menu-item {
  background: #1f2d3d !important;
}
.el-submenu .el-menu-item:hover {
  background: #001528 !important;
}

/* 去除导航栏右侧白线 */
.el-menu {
  border-right: 0;
}
</style>

局部修改:想要局部修改不污染其他组件则不能去掉scoped,需要运用样式穿透(::v-deep)可以达到效果,这里拿个表格样式举例。
在这里插入图片描述

1、局部文件中的所有el组件修改样式:

比如,此时我想将这张表格中所有el输入框的边框去掉,只需要整个文件的style样式中加入样式穿透:

<style lang="scss" scoped>
::v-deep .el-input__inner {
  border: none;
}

// 文本输入框样式
::v-deep .el-textarea__inner {
  border: none;
  resize: none; /* 这个是去掉 textarea 下面拉伸的那个标志 */
}
</style>

效果图:
在这里插入图片描述
2、局部文件中的某个el组件修改样式:

比如,此时我只想将试验名称后的el输入框的边框去掉,首先在这个el输入框的组件中加一个class类名,然后在style样式中加入样式穿透:

<style>
::v-deep .noneBorderInput .el-input__inner {
  border: none;
}
</style>

效果图:
在这里插入图片描述
总结:运用样式穿透可以局部修改el组件样式

备注:不同的css预处理器支持样式穿透的符号不同,原生css用>>>,less用/deep/,scss用::v-deep。

Logo

前往低代码交流专区

更多推荐