前端中的样式穿透，如何覆盖elementUI原来的样式

在使用 Vue 项目结合 ElementUI 组件库时，由于样式作用域的限制，有时需要进行样式穿透来覆盖 ElementUI 原有的样式。下面为你介绍不同场景下样式穿透的方法。

Vue 2.x 中使用 /deep/ 或 ::v-deep

在 Vue 2.x 版本里，可使用 /deep/ 或者 ::v-deep 选择器来穿透作用域样式，从而覆盖 ElementUI 组件的默认样式。

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

<style scoped>
/* 使用 /deep/ 穿透样式 */
/deep/ .el-button--primary {
  background-color: #ff0000;
  border-color: #ff0000;
}

/* 或者使用 ::v-deep 穿透样式 */
::v-deep .el-button--primary {
  background-color: #ff0000;
  border-color: #ff0000;
}
</style>

在上述代码中，/deep/ 和 ::v-deep 选择器能够让样式穿透当前组件的作用域，对 el-button--primary 类对应的 ElementUI 按钮样式进行修改。

Vue 3.x 中使用 :deep()

在 Vue 3.x 版本中，/deep/ 和 ::v-deep 已被弃用，推荐使用 :deep() 伪类来实现样式穿透。

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

<style scoped>
/* 使用 :deep() 穿透样式 */
:deep(.el-button--primary) {
  background-color: #ff0000;
  border-color: #ff0000;
}
</style>

这里的 :deep() 伪类可使样式穿透到子组件内部，进而修改 ElementUI 组件的默认样式。

不使用 scoped 样式

要是不想使用样式穿透，也可以去掉 <style> 标签上的 scoped 属性，不过这种方式会使样式全局生效，可能会影响到其他组件。

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

<style>
/* 全局样式修改 */
.el-button--primary {
  background-color: #ff0000;
  border-color: #ff0000;
}
</style>

此代码去掉了 scoped 属性，直接对 el-button--primary 类对应的样式进行修改，该样式会应用到所有使用该类的按钮上。

使用 CSS Modules

如果项目使用了 CSS Modules，可以通过 :global() 来定义全局样式。

<template>
  <div>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

<style module>
/* 使用 :global() 定义全局样式 */
:global(.el-button--primary) {
  background-color: #ff0000;
  border-color: #ff0000;
}
</style>

在这个例子中，:global() 可以让样式规则在全局范围内生效，从而覆盖 ElementUI 组件的默认样式。

注意事项

• • 样式穿透可能会破坏组件的封装性，在使用时要谨慎，尽量精确地选择需要修改的样式，避免影响到其他无关的组件。

• • 不同的构建工具和 Vue 版本对样式穿透的支持可能存在差异，要根据实际情况选择合适的方法。