如何更改element-ui的样式,element 修改样式
前端项目中会用到各种各样的组件，有时候组件的默认样式并不是你项目中需要的，所以你需要改变样式。下面这篇文章主要介绍了在vue中修改element-ui组件默认css样式的四种方法，有需要的朋友可以参考一下。
目录
前言1。使用全球统一覆盖
2.在中修改它。vue文件
3.修改组件的样式。
4.参考element-ui官方文档的api
问题摘要
前言
修改元素ui组件的默认样式一直是老生常谈。在做完公司的一整个项目后，我总结了以下四种方法来修改element-ui的默认样式。
1.使用全局统一覆盖
对于一些具有固定样式的通用组件，可以通过创建一个新的css或scss文件来覆盖元素的原始类，从而对它们进行全局处理。
可以在src/styles目录下新建一个element-UI-reset.scss，根据UI的需要修改原来的类名。
使用scss的好处是可以使用变量来应对UI的不同变化。
比如我们常用的按钮、分页、复选框等组件在UI中基本都是一样的设计，我可以统一修改这些样式。
element-ui-reset.scss
$ danger-BTN-color:# f 25454；
$ primary-BTN-color:# 3d 66 e 4；
$ success-BTN-color:# 12a 763；
//修改默认按钮颜色。el按钮-主要{
背景色：$ primary-BTN-color；
边框-半径：4px
//border:1px solid $ primary-BTN-color；
字体大小：16px
边框：0；
}
//修改危险按钮的颜色。el按钮-危险{
背景色：$ danger-BTN-color；
边框-半径：4px
//border:1px solid $ danger-BTN-color；
字体大小：16px
边框：0；
}
//修改成功按钮的颜色。el按钮-成功{
背景色：$ success-BTN-color；
边框-半径：4px
//border:1px solid $ success-BTN-color；
字体大小：16px
边框：0；
}
//修改默认按钮的颜色。el按钮-默认{
字体大小：16px
边框-半径：4px
}
//修改成功按钮的颜色。el按钮-警告
//background-color:$ success-BTN-color；
边框-半径：4px
//border:1px solid $ success-BTN-color；
字体大小：16px
边框：0；
}
//修改分页颜色。El-分页{
位置：绝对；
显示：内嵌-块；
边距：0自动；
左：50%；
transform:translate x(-50%)；
背景色：# fafafa
边框：实心1px # dfe 8 EB；
填充：0！重要；电子传呼机{
保证金：0！重要；号码{
颜色：#3d66e4！重要；
border-left:1px solid # dfe 8 EB；
border-right:1px solid # dfe 8 EB；
背景色：#fafafa！重要；活动{
颜色：#fff！重要；
//border:1px solid # 3d 66 e 4；
背景色：#3d66e4！重要；
边框：1px纯色#3d66e4！重要；
}
}
}
}。El-pagination . is-背景。BTN-接下来，El-pagination . is-背景。btn-prev，El-pagination . is-背景。李
保证金：0！重要；
背景色：#fafafa！重要；
}
//修改复选框。el-checkbox__inner{
边框：1px实心# C0C0C0
宽度：16px
高度：16px
边框半径：0；
}
然后在你的main.js里介绍一下
“导入”。/src/styles/element-ui-reset . scss
这样的
优势
全球覆盖，省事
使用scss更加灵活。
您可以随时删除样式替代。
劣势
部分修改需要被覆盖。
所有修改后的组件样式都是相同的。
2.在.vue文件中修改
这个方法是给vue文件添加一个新的样式标签。
用于修改某些特定的组件样式，但不会全局应用。
例如，一个. vue文件需要一个专门定制的表格组件，而其他文件需要原始样式。
这样，我们最好的方法是向。vue文件。
在此修改表格的默认样式。
模板
div class=my-class
el表
/el-table
/div
/模板
脚本
/脚本
style scoped=scoped lang=scss
/风格
风格
/*修改element-ui中表格组件的样式*/。我的类_ _扩展列。单元格{
显示：无；
}。我的班级。el-table tbody tr:hovertd {
光标：指针；
}。我的班级。el表格。El-表单-项目。el-input__inner:focus{
边框：1px纯色# 3D66E4
}
/风格
但是请注意，必须添加唯一的作用域，也就是最外层的类名，比如上面的my-class。它限制了当前表格的修改样式只能在这个类及其子类中生效。
否则，表格样式仍将被全局覆盖。
当然，如果您愿意，可以将类更改为id，这样可以确保类名不会冲突。
模板
div id=我的类别
el表
/el-table
/div
/模板
风格
/*修改element-ui中表格组件的样式*/
# my-class _ _展开-列。单元格{
显示：无；
}
#我的班级。el-table tbody tr:hovertd {
光标：指针；
}
#我的班级。el表格。El-表单-项目。el-input__inner:focus{
边框：1px纯色# 3D66E4
}
/风格
这种方法的优点是可以动态绑定一些类。
模板
div id=我的类别
el-table :class=my-table
/el-table
/div
/模板
风格
/*修改element-ui中表格组件的样式*/
# my-class _ _展开-列。单元格{
显示：无；
}
#我的班级。el-table tbody tr:hovertd {
光标：指针；
}
#我的班级。el表格。El-表单-项目。el-input__inner:focus{
边框：1px纯色# 3D66E4
}
#我的班级。我的表{
}
/风格
优势
灵活，可以动态绑定。
不会被全局修改。
劣势
需要唯一的类范围。
3.修改组件的style样式
抛开冗余，我不推荐这种方法，但我不能保证它的有效性(取决于element-ui源代码的支持)。
但是，您可以将它用于一些经常使用但需要动态绑定属性的组件。
比如这个el-backtop组件，我可能需要给它绑定一些动态样式属性。
因此您可以将样式绑定到它。
El-back top target= :bottom= 100
div :style={
身高：100%；
宽度：_ width
背景色：# f2f5f6
box-shadow: 0 0 6px rgba(0，0，0， 12)；
文本对齐：居中；
行高：40px
颜色：# 1989fa
边界半径：50%；
}
i class=el-icon-caret-top/i
/div
/el-backtop
data() {
返回{
_宽度：50%
}
}
优势
灵活方便
动态绑定
劣势
冗余
高耦合
4. 参考element-ui官方文档的api
有些组件官网给出了修改样式的api。
您可以根据api指定组件的样式。
优势
政府
劣势
支持的组件较少。
疑问
为何要新加一个style标签 ?
因为在实际使用中，我发现有些用scoped属性编写的类对element-ui的组件不起作用。
结果有些修改过的样式可以用，有些不能用，我们干脆重写了样式标签。
为何不用!important属性
这家伙太霸道了，比全局修改还强制。另外，写起来很麻烦。
为何不用：:v-deep穿透
首先抛开恶心的文笔不谈，它的耦合度太高了。
如果不需要样式覆盖，只需要删除新的样式标签。
而且用：v-deep，一行一行的换谁受得了。
总结
以上方法不是很官方的做法，是我在日常发展中踩坑后总结出来的方法。
它并不完美，但很大程度上解决了我的问题。
关于vue中element-ui组件默认css样式的修改，本文到此为止。关于修改Vue中元素UI组件的默认css样式的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。