问题
在使用 element-ui 时, 有时候想要修改组件内的样式, 但不成功, 例如
- <div class="test">
- <el-button > 按钮 </el-button>
- </div>
- <style lang="less" scoped>
- .test{
- .el-button span{
- background:red;
- }
- }
- </style>
以上对. el-button span 的样式不生效
问题的原因
想要找到解决方案, 我们先来看看不生效的原因.
1) 首先, scoped 是如何实现局部样式的?
查看 vu-loader 文档, 根据文档可以知道, 当 <style> 标签有 scoped 属性时, 会对组件内的元素加上一个类似于 data-v-f3f3eg9 的独特标签, 组件内的样式只会对带有这个标签的 dom 元素生效, 因此加上 scoped 后, 组件内的样式不会影响组件外.
2) 那 scoped 为什么对第三方子组件内的 dom 元素不生效?
文档中提到
仔细阅读这句话, 也就是说采用 scoped 后, 对组件 A 内采用的子组件, 只会对其根元素加上组件 A 的独特标签, 因此对子组件的根元素改变样式能生效, 而对非根元素是不生效的. 因此上面的例子如果改为对根元素. el-button 修改样式, 就会生效
- <style lang="less" scoped>
- .test{
- .el-button{
- background:red;
- }
- }
- </style>
可以看下具体的 dom 元素, 如图
上图中 data-v-5752faac 是当前组件 test 的独特标签 (其他是父元素带上的, 这里忽略), 可以看到子组件 el-button 的根元素带上了此标签, 而非根元素 span 没带上, 因此对 span 的修改是不生效的, 此时如果手动在 span 元素上加上 data-v-5752faac, 会发现样式生效
3) 不仅限于第三方组件
从上面的分析来看, 其实不仅限于第三方组件, 任何采用到的子组件, 只要是想修改子组件的非根元素都是不生效的
解决方案
[方案一] 加上一个非 scoped 样式
根据文档可知, vue 可以混用本地和全局样式, 因此对子组件的非根元素样式修改, 可以单独放在一个非 scoped 样式中
- <style>
- .test{
- .el-button span{
- background:red;
- }
- }
- </style>
- <style scoped>
- /* 本地样式 */
- </style>
[方案二] 采用 / deep/
加上 / deep/, 组件的样式可以渗透到子组件相应的元素上
- <style lang="less" scoped>
- .test{
- /deep/ .el-button span{
- background:red;
- }
- }
- </style>
参考文档
vu-loader 文档
来源: http://www.bubuko.com/infodetail-3231419.html