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

学校大作业，我负责的前端部分，正好前段时间学习了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>

在浏览器里渲染成这样

可以看到渲染的时候在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>

重新运行样式就生效了