背景:
vue-cli3.0 项目中需要修改 element-ui collapse collapse-item 的样式(背景色等),template 简单如下:
- <el-collapse class="my-collapse">
- <el-collapse-item title="分类 1" name="1" class="plugins-collapse-item">
- <span > 分类 1</span>
- </el-collapse-item>
- <el-collapse-item title="分类 2" name="2">
- <span > 分类 2</span>
- </el-collapse-item>
- </el-collapse>
试了 scoped 局部样式, 完全不生效.
- <style lang="sCSS" scoped>
- .el-collapse-item {
- .el-collapse-item__header {
- background: #262720;
- color: #ffffff;
- height: 24px;
- line-height: 24px;
- font-size: 12px;
- border-bottom: 1px solid #4b4c44;
- display: flex;
- flex-direction: row-reverse;
- justify-content: flex-end;
- .el-collapse-item__arrow {
- margin: 0;
- margin-right: 5px;
- }
- }
- .el-collapse-item__wrap {
- background: #262720;
- border-bottom: 1px solid #4b4c44;
- color: #ffffff;
- .el-collapse-item__content {
- color: #ffffff;
- padding-bottom: 0;
- line-height: 18px;
- }
- }
- }
- </style>
去掉 scoped, 写在全局样式里, 生效了!
- <style lang="scss">
- /// 上述代码
- </style>
第一次试全局样式没生效, 找到原因: 没写父类 class .el-collapse-item, 层级加载顺序出了问题, 样式被覆盖了.
虽然全局样式可以解决, 但是不想写在全局样式里, 怎么办呢? 找到了 Deep Selectors, 可以在父组件中修改子组件的样式, 那咱就来尝个鲜吧.
在 CSS 中, 使用>>>
- <style>
- .el-collapse-item>>> .el-collapse-item__header {
- background: #262720;
- color: #ffffff;
- height: 24px;
- line-height: 24px;
- font-size: 12px;
- border-bottom: 1px solid #4b4c44;
- display: flex;
- flex-direction: row-reverse;
- justify-content: flex-end;
- }
- .el-collapse-item>>> .el-collapse-item__wrap {
- background: #262720;
- border-bottom: 1px solid #4b4c44;
- color: #ffffff;
- }
- </style>
在无法正确解析>>>的预处理器中 (例如 Sass) 使用 /deep/ or ::v-deep
- .el-collapse-item {
- ::v-deep .el-collapse-item__header {
- background: #262720;
- color: #ffffff;
- height: 24px;
- line-height: 24px;
- font-size: 12px;
- border-bottom: 1px solid #4b4c44;
- display: flex;
- flex-direction: row-reverse;
- justify-content: flex-end;
- .el-collapse-item__arrow {
- margin: 0;
- margin-right: 5px;
- }
- }
- ::v-deep .el-collapse-item__wrap {
- background: #262720;
- border-bottom: 1px solid #4b4c44;
- color: #ffffff;
- .el-collapse-item__content {
- color: #ffffff;
- padding-bottom: 0;
- line-height: 18px;
- }
- }
- }
编译后的结果:
/deep/ or ::v-deep
实现逻辑在插件 component-compiler-utils 里, 附上 component-compiler-utils 解析 scope 的源码:
scope 解析
参考:
vue 中 style scope 深度访问新方式(::v-deep)
来源: http://www.jianshu.com/p/d53de2c18518