element组件中自定义组件的样式不生效问题(vue scoped scss无效)

解决 Vue 中 element 组件中自定义组件的样式不生效问题

问题描述

在使用 Vue 开发项目时，有时我们会遇到自定义组件在 element 组件中样式不生效的问题。即使我们在组件的样式中使用了 scoped 修饰符或者 lang="scss"，但在 element 组件中的样式仍然不生效。

解决方法

方法一：使用深度选择器

在 Vue 中，可以使用深度选择器（deep selector）来解决样式不生效的问题。在样式中使用 >>> 或 /deep/ 符号可以将样式应用到子组件中。

示例代码：

<style lang="scss" scoped>
.element-parent >>> .custom-component {
  /* 自定义样式 */
}
</style>

在上述示例中，我们使用 >>> 符号将 .element-parent 组件中的样式应用到 .custom-component 组件中。

方法二：使用全局样式

如果你希望在整个项目中使用相同的样式，而不仅仅是在当前组件中，可以考虑使用全局样式来解决该问题。

示例代码：

/* 全局样式 */
.custom-component {
  /* 自定义样式 */
}

在上述示例中，我们将自定义组件的样式直接定义在全局样式中。

注意事项

在使用以上方法解决样式不生效的问题时，需要注意以下几点：
1. 使用深度选择器或者全局样式可能会导致样式的作用范围扩大，而不仅限于当前组件。因此，请在使用之前确保当前样式不会影响到其他组件或页面。
2. 如果你使用了 Vue CLI 创建项目并使用了 Vue Loader，且启用了 css.module 选项时，深度选择器或全局样式可能无效。这是因为 Vue Loader 默认会为每个组件的样式开启 CSS Modules，若要使用深度选择器或全局样式，需要将 scoped 移除，并在 <style> 标签上添加 module 属性（如：<style lang="scss" module>）。

以上是解决 Vue 中 element 组件中自定义组件的样式不生效问题的方法，你可以根据具体情况选择适合的方法。