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>
在浏览器里渲染成这样
可以看到渲染的时候在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>
重新运行样式就生效了
上一篇: uniapp 修改样式无效
下一篇: HashSet源代码分析(JDK1.8)
推荐阅读
-
在集成环境中修改配置文件php.ini不生效的解决办法
-
解决ie动态修改link样式,import css不刷新的问题
-
关于maven项目中修改的JS不生效的解决方案
-
修改php.ini不生效问题解决方法(上传大于8M的文件)
-
一次Linux修改MySQL配置不生效的问题解决
-
php.ini save_handler 修改不生效的解决办法
-
关于Linux系统(Ubuntu14.04)上QComboBox设置qss样式表字体颜色color属性不生效或只对下拉列表生效的解决方案
-
GRUB2设置theme以后仍不能显示以及GRUB2修改背景图片后不生效的解决方法
-
在集成环境中修改配置文件php.ini不生效的解决办法
-
elementui的el-popover修改样式不生效的解决