elementui默认样式修改的⼏种⽅法
elementui默认样式修改的问题
当我们在vue中引⼊第三⽅组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有以下三种⽅法修改样式，并且不影响全局样式：
1 在样式外新增⼀个样式不添加scoped
<style>
.my{
margin: 20px;
}
.my .el-input__inner{
border-radius: 15px;/* 这个样式起效果 */
}
</style>
<style scoped>
.my .el-input__inner{
border-radius: 30px; /* 这个样式不起效果 */
}
</style>
2 使⽤deep样式穿透
<style scoped>
border radius什么意思
.my .el-input__inner{
border-radius: 30px;/* 这个不起作⽤ */
}
.
my /deep/ .el-input__inner{
border-radius: 30px;/* 这个起作⽤ */
}
</style>
3 使⽤>>>穿透
<style scoped>
.my .el-input__inner{
border-radius: 30px;/* 这个不起作⽤ */
}
.my >>> .el-input__inner{
border-radius: 30px;/* 这些起作⽤ */
border: 1px solid #eceef2;
outline: 0;
}
</style>
4 有些样式是⾏内样式权重⽐较⾼则需要使⽤上⾯的⼏种⽅法来保证可以修改样式并且添加上!important来增加权重
<el-input v-model="input" placeholder="请输⼊内容" ></el-input>
<style scoped>
.my >>> .el-input__inner{
border-radius: 30px;
border: 1px solid #eceef2;
outline: 0;
width: 400px!important;
}
</style>
这样input框的宽度就是400px了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。