专项答疑 ​

CSS样式覆盖 ​

在使用第三方UI组件时，由于第三方组件内置了一些组件样式，且部分样式不可被修改，为了修改这些内容，我们不得不使用css样式覆盖的办法来达到修改组件样式的目的，因此针对低代码平台引入的如ElementUI、Vant这样的UI组件库，采用如下方法进行样式的修改，下面以修改el-tabs文字大小为例：

1、找到元素 ​

先使用低代码页面，将tabs标签页加入到页面中，按f12打开开发工具，切换到元素(element)内容，点亮左上角的元素选择工具，将鼠标移动到想要修改的元素上，查看其元素和样式

2、找到样式尝试修改 ​

找到想要修改的样式对应的css内容，如图找到了字号大小相关的设置，其中有效的为上面部分标黑的内容以及下面部分配置的内容，可以直接在浏览器中调整其值尝试是否有变化，比如将16px改为20px看看效果。

3、复制内容到全局样式 ​

将上一步看到的黑色内容（灰色的不用）复制下来，找到低代码平台右侧的显示-高级选项-编辑样式表文件，点击打开弹窗，粘贴刚才复制的标黑内容，在前面加上三个箭头（中间加一个空格），后面使用大括号将样式进行重写

>>> .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll .el-tabs__nav .el-tabs__item{
  font-size: 20px;
}

4、页面查看效果 ​

预览发现文字效果正常放大了，之前生效的样式上多了一个横线，上面多了一个新的样式，正是我们刚才设置的全局样式