ElementUI通过CSS修改组件样式

前言

最近在做一个比赛项目,在前端设计(使用Vue.js)的时候用到了ElementUI组件。前端整体的背景是深色调,调用ElementUI各项组件时其样式并不能很好的契合主题,因此需要通过CSS修改其色调及样式,但是直接通过class定位组件,并添加!important关键字后依然不能改动。

Table 表格为例,原组件背景为白色,目的将其变为透明,以更好地适配毛玻璃效果。

Vue相关依赖:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
"dependencies": {
"axios": "^0.24.0",
"core-js": "^3.6.5",
"echarts": "^4.9.0",
"echarts-wordcloud": "^1.1.3",
"element-ui": "^2.15.6",
"less": "^4.1.2",
"less-loader": "^4.0.6",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"css-loader": "^6.5.1",
"file-loader": "^6.2.0",
"style-loader": "^3.3.1",
"vue-template-compiler": "^2.6.11",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2"
},

正文

/deep/深度选择器

style的作用域为scoped,同时配合less

1
2
3
<style lang="less" scoped>

</style>

需要用到/deep/深度选择器

在Vue中,为了避免父组件的样式影响到子组件的样式,会在style中加入<style scoped>,如此一来,父组件中如果有跟子组件相同的class名称或者使用选择器的时候,就不会影响到子组件的样式。

具体效果则会在组件中添加一个hash值(如下图所示):

这时如果想在父组件修改子组件的样式,就需要使用/deep/深度选择器。

操作

为了更好融入毛玻璃的小组件背景,将表格设为透明:

1
2
3
4
5
6
7
8
9
10
/*最外层透明*/
/deep/ .el-table{
background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
background-color: transparent !important;
}

注意

  • 可以通过f12定位元素,通过/deep/深度选择器进行组件样式修改
  • 必要时可添加!important修饰

后记

目前还没有遇到未可修改的组件样式。

参考文章:ElementUI中的el-table表格设置全透明(组件化开发和html两种方式)_诗水人间的博客-CSDN博客_eltable透明