Vue Element UI 之默认样式修改不成功的问题
一、问题描述想要在某个 el-form-item 中添加一个 color 属性,在浏览器调试没有问题,然后就把代码复制粘贴到项目中,但是问题出现了,竟然没有添加上去,what?why?这是在测试的时候确定的位置,红框内是测试时添加的样式(这是它该有的样子,然而,当我在项目中写好代码,刷新之后再次来到这里,发现空空如也,红框代码它不在)这是在项目中修改的代码:<style scope...
·
一、问题描述
想要在某个 el-form-item 中添加一个 color 属性,在浏览器调试没有问题,然后就把代码复制粘贴到项目中,但是问题出现了,竟然没有添加上去,what?why?
这是在测试的时候确定的位置,红框内是测试时添加的样式(这是它该有的样子,然而,当我在项目中写好代码,刷新之后再次来到这里,发现空空如也,红框代码它不在)
这是在项目中修改的代码:
<style scoped>
.el-form-item__content{
color: red;
}
</style>
二、原因
搜索了一下,大家都将矛头指向一个单词:scoped(单词好无辜的样子,哈哈)
三、解决方法
方法有三:
1、方法一
简单粗暴,去掉 scoped(当然,这样的话就会出现样式全局使用的缺陷)
<style>
.el-form-item__content{
color: red;
}
</style>
2、方法二
在要修改的class的父级添加一个class名,并通过明确路径修改样式
<style scoped>
.routerLink .el-form-item__content{
color: red;
}
</style>
3、方法三
无疑,前两种方法应该是能成功的,然而,我这里却没有,所以更简单粗暴一点,我直接在父级上添加样式了
<style scoped>
.routerLink{
color: red;
}
</style>
完成~~
更多推荐
已为社区贡献21条内容
所有评论(0)