vue-cli3 使用深度选择器自定义修改element-ui样式失败

Question

我引用了element的

想调整弹出头的样式，在浏览器调试时可用直接通过修改.el-collapse-item__header来修改样式。

但是在我的vue中，即使我用了深度选择器也无效。

    .el-collapse-item >>> .el-collapse-item__header{
        background-color: rgb(217, 237, 247);
    }

又或者我自己给父组件增加了一个myBG的类，然后深度选择器选择，依旧无效：

        .myBG >>> .el-collapse-item__header{
            background-color: rgb(217, 237, 247) !important;
        }

Answer 1

你写的是 sass 还是 css？
如果是sass，需要换用 /deep/

.myBG {
  /deep/  .el-collapse-item__header{
    background-color: rgb(217, 237, 247) !important;
  }
}

Answer 2

从 >>> 看你用的应该是 stylus，但既然你用了 stylus，层级关系就不应该并列写了，应该写成

.el-collapse-item {
    >>> .el-collapse-item__header{
        background-color: rgb(217, 237, 247);
    }
}