如何使用Vue JS范围样式

Question

我正在使用 vue js 的 ELEMENT UI 。我想重写它的样式。我可以做到全球风格。但是，作用域样式无效。当我使用全局样式时，它将更改我的所有页面设计。但我只想一页完成。

这是我的风格（全局风格。正在运行）：

<style>
.el-icon-close:before{
    content: "Back" !important;
}
</style>

但是当我使用作用域时，它不起作用：

<style scoped>
.el-icon-close:before{
    content: "Back" !important;
}
</style>

对此有什么想法吗？

Answer 1

scoped关键字意味着对样式的更改将仅应用于当前作用域中的元素。表示页面中所有自定义元素。如果要在其他位置访问“创建”的元素，则必须跳过scoped关键字。作用域标记中的代码仅适用于当前页面/视图，否则将适用于所有页面/视图。

所有未限制范围的元素通常是App.vue文件中的样式。如果要应用不受范围限制的元素样式，只需将其包装在div中，然后将其添加到类中并在受限制的标记中设置样式：

<style scoped>
.my-custom-div{
    .el-icon-close:before{
         content: "Back" !important;
    }
}
</style>

与我共事的阿塔斯特。

Answer 2

您必须使用自定义类：

.custom-class { smthng去这里... }

Answer 3

这可以通过 Deep selectors

实现

对于您的用例：

<style scoped>
.parent-div /deep/ .el-icon-close:before{
    content: "Back" !important;
}
</style>