Vue中的 scoped 属性使得组件样式具有私有作用域，导致公共组件如 el-input 的样式难以修改。scoped 通过给 DOM 添加 data 属性并修改 CSS 选择器实现样式隔离。解决办法包括移除 scoped 或额外添加无 scoped 的 style 标签。注意权重问题以确保样式生效。
原因
首先我们通过查找得到原因：style的scoped属性，scoped表现为css的私有作用域，实现样式私有化，而el-input是element公共组件，正因如此，scoped使其样式难以更改。
下面我们来介绍一下。
1、什么是scoped
vue项目文件中style样式的特殊属性，定义私有作用域。也就是说当style标签带有scoped属性则css样式只作用于当前组件，优点是使各组件之间互不影响，缺点是使公共组件的样式难以更改。
2、scoped工作的原理
给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式。如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
3、解决方法
（1）去掉style的scoped属性，这样就使得样式变为共有样式，比较麻烦
（2）再添加一个style标签不带有scoped属性，看起来有些担心，但其实是可以实现运行的，这样既一个用于私有样式，一个用于共有样式，简直完美。
（ps;注意权重！！问题！）
扫一扫
7800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
