element-ui的样式会在全局使用,在个别页面要修改,有四种方法不会影响全局的样式
1 在样式外新增一个样式不添加scoped
<style scoped>
.my .el-input__inner{
border-radius: 30px; /* 这个样式不起效果 */
}
</style>
2 使用deep样式穿透
<style scoped>
.my /deep/ .el-input__inner{
border-radius: 30px;/* 这个起作用 */
}
</style>
3 使用>>>穿透
<style scoped>
.my >>> .el-input__inner{
border-radius: 30px;/* 这些起作用 */
border: 1px solid #eceef2;
outline: 0;
}
</style>
4 有些样式是行内样式权重比较高则需要使用上面的几种方法来保证可以修改样式并且添加上!important来增加权重
<el-input v-model="input" placeholder="请输入内容" style="width: 300px;"></el-input>
<style scoped>
.my >>> .el-input__inner{
border-radius: 30px;
border: 1px solid #eceef2;
outline: 0;
width: 400px!important;
}
</style>