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

问题背景

在Vue开发中，我们经常使用第三方UI库中的组件，同时也经常需要自定义组件样式。但是我们经常会遇到组件样式不生效的问题，特别是在使用 scoped 样式作用域和 scss 预处理器时更容易出现此问题。

解决方法

一、使用 /deep/ / ::v-deep

当我们需要修改第三方组件的样式时， Vue提供了 scoped 样式模块来确保组件样式只应用于当前组件。 但是，scoped 作用域限制也导致我们无法覆盖第三方UI组件库的样式。

在这种情况下，可以使用 /deep/ 或 ::v-deep 伪类选择器来绕过作用域限制。例如，我们想要覆盖 Element UI 中的 radio 组件的样式，可以这样编写CSS样式：

>>> .el-radio__label{
  font-size: 18px;
}

或者：

::v-deep .el-radio__label{
  font-size: 18px;
}

其中，>>> 与 /deep/ 效果相同， ::v-deep 是Vue组件中内置的伪类选择器，用于覆盖作用域限制。

二、使用 !important

另一种覆盖组件样式的方法是在CSS样式中使用 !important 修饰符。例如：

.el-radio__label{
  font-size: 18px !important;
}

使用 !important 修饰符能够覆盖原先的样式，但是过度使用也会导致样式冗余，不可维护，建议谨慎使用。

示例

下面，我们以button作为示例，演示如何使用 /deep/ 选择器和 !important 修饰符来自定义样式。假设我们在使用 Element UI 中的 button 组件时，需要将其背景色改为红色。

1. 使用 /deep/ 选择器

<template>
  <div>
    <el-button class="red-button">Click Me</el-button>
  </div>
</template>

<style scoped>
.red-button >>> .el-button {
  background-color: red;
  color: white;
}
</style>

在上面的例子中，/deep/ 选择器选择器使用方式为：>>>。这个选择符会影响当前组件下的所有子组件也就是 button 组件，从而覆盖掉 Element UI的原有样式。最终会将 el-button 的背景色改为红色。

1. 使用 !important 修饰符

<template>
  <div>
    <el-button class="red-button">Click Me</el-button>
  </div>
</template>

<style scoped>
.el-button {
  background-color: red !important;
  color: white;
}
</style>

在上面的例子中，使用了 !important 修饰符将 el-button 的背景色改为红色，最终会将按钮颜色改为红色。但是，在实际开发中应该谨慎使用 !important 修饰符，因为它可能会影响其他地方的样式，导致样式冗余，不利于后期维护。

总结

使用 /deep/ 或 ::v-deep可以覆盖掉Vue组件中的样式作用域，同时也可以使用 !important 修饰符来确保自定义样式生效。但是，应该注意样式冗余问题，谨慎使用。