相信大家在写
vue
项目的时候大多都会用到element
组件,这样修改组件自带默认样式也就成了前端工程师的主要任务之一了,这篇文章就怎样修改element
中的默认ui
样式进行说明
- 以
input
输入框为例
无论要修改哪种样式,都要先熟知或查看element
自带的修改样式方式,如果element
本身就自带了修改样式的属性,直接用即可,大部分标签也支持利用class
命名更改标签样式,本文主要对没有提供更改样式属性的标签进行修改
<el-input v-model="input" placeholder="请输入内容" class="myInput"></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
<style scoped>
.myInput {
width: 300px;
height: 50px;
margin: 50px 100px;
}
</style>
1、通过class
更改通用样式
- 这样设置后发现通过
class
更改的高度没有起作用
这时候打开控制台看到是这样的结构 - 我们加的样式被放到外层的
div
里了同el-input
类名同级,真正起高度作用的是el-input__inner
所以我们就有了结论:只要更改el-input__inner
的高度值就可以了 -
说明:
el-input__inner
类名直接写到style
里是不起作用的,因为此style
为组件私有style
,伴有scope
唯一性,而原本样式是直接注册到全局的,故可以这样写:
2、通过全局样式标签修改
可以将
.el-input__inner {
height: 50px;
}
直接写到公共样式里即可以更改,但是这样会导致全局的input
框都会变成此样式的,显然这不是我们要的结果,你可以这样写:
<style scoped>
.myInput {
width: 300px;
height: 50px;
margin: 50px 100px;
}
</style>
<style>
.outCompoment .el-input__inner {
height: 50px;
}
</style>
-
.outCompoment
即为组件最外层样式,保证每个组件最外层样式的唯一性,就可以解决此问题
但是这样写不仅不美观,而且也不能保证每一个组件最外层样式不出错出现重复的现象,下面看第三种方法:
3、通过deep
深度修改标签样式
<style scoped>
.myInput {
width: 300px;
height: 50px;
margin: 50px 100px;
}
.outCompoment /deep/ .el-input__inner {
height: 50px;
}
</style>
这样就会被编译成
也就实现了输入框高度的更改,这样改不仅美观,也不会出现之前的样式冲突问题
总结
element
里面的样式都可以用第三种方法去更改,不推荐第一二种,保证不了样式的唯一性,很容易出现全局样式污染的情况,大家还有什么好的方式,欢迎补充修正~