如何使用 vue js 作用域样式

Posted 2023-02-22

【中文标题】如何使用 vue js 作用域样式

【英文标题】：How to use vue js scoped style

【发布时间】：2021-01-07 07:54:14

【问题描述】：

我正在使用 vue js 的 ELEMENT UI。我想覆盖它的风格。我可以用全局风格做到这一点。但是范围样式不起作用。当我使用全局样式时，它会改变我的所有页面设计。但我只想为一页做。

这是我的风格（全局风格。这是有效的）：

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

</style>

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

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

</style>

对此有什么想法吗？

【问题讨论】：

你也可以使用深度选择器：***.com/a/57704482/575468

【参考方案1】：

scoped 关键字意味着对样式的更改将仅适用于当前范围内的元素。意思是页面中的所有自定义元素。如果您想在其他地方访问“创建”的元素，则必须跳过 scoped 关键字。范围标记中的代码将仅适用于当前页面/视图，否则它将适用于所有页面/视图。

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

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

</style>

至少和我一起工作。

【参考方案2】：

您必须使用自定义类：

.custom 类 smthng 到这里...

【参考方案3】：

这可以通过Deep selectors 实现

对于您的用例：

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

</style>