如何使用 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 关键字。 scoped 标签中的代码将仅适用于当前 page/view 否则它将适用于所有 pages/views.

所有没有作用域的元素通常都是 App.vue 文件中的样式。如果你想应用没有作用域的元素的样式，只需将它包装在 div 中，添加 class 并在作用域标签中设置样式：

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

至少和我一起工作。

Answer 2

您必须使用自定义 class:

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

Answer 3

这可以通过 Deep selectors

实现

对于您的用例：

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

How to use vue js scoped style