欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue+elementUI修改样式不生效的解决过程

程序员文章站 2022-06-07 13:35:57
...

学校大作业,我负责的前端部分,正好前段时间学习了vue和elementUI,就来实践一下,部分代码如下:

<div class="ipInput">
    <el-input class="ip" v-model="part1"></el-input>
    ......
</div>

后来我发现在el-input舔加样式使文字居中但并没有生效

<div class="ipInput">
    <el-input class="ip" v-model="part1"></el-input>
    ......
</div>

<style scoped>
......
.ip{
    text-align:center
}
......
<style>

vue+elementUI修改样式不生效的解决过程

在浏览器里渲染成这样

vue+elementUI修改样式不生效的解决过程

可以看到渲染的时候在input外套了个div元素,我加在el-input的ip这个class也是在这个div元素上,input元素则是el-input__inner这个class

div为父组件,input为子组件,vue里可以看到<style scoped>,由于scoped的存在父组件的样式无法传递到子组件

而以上可以看到我们的原本加在el-input的名为ip的class渲染到了父组件div上,这也就是为什么添加样式无法生效的原因

所以修改代码如下(可以将/deep/换成>>>)

<div class="ipInput">
    <el-input class="ip" v-model="part1"></el-input>
    ......
</div>

<style scoped>
......
.ip /deep/ .el-input__inner{
    
}
......
<style>

重新运行样式就生效了

vue+elementUI修改样式不生效的解决过程