使用scoped样式

可以在组件的样式中使用scoped修饰符，以限制样式仅作用于当前组件中的元素。这样就可以在不影响全局样式的情况下，修改element-plus组件的样式。

<template><div class="my-component"><el-button>按钮</el-button></div>
</template><style scoped>
.my-component /deep/ .el-button {background-color: red;
}
</style>

使用::v-deep选择器

::v-deep是一个深度选择器，可以选择组件内的所有元素，而不仅仅是当前组件的根元素。

<template><div class="my-component"><el-button>按钮</el-button></div>
</template><style>
.my-component ::v-deep .el-button {background-color: red;
}
</style>

以上两种方法都可以达到修改element-plus组件的样式而不影响其他Vue组件的样式的目的。

---

使用scoped样式将样式限定在组件的范围内。在组件的<style>标签中添加 scoped 属性，这将使所有的CSS规则都只作用于当前组件的元素。

使用层级选择器和类名覆盖Element Plus组件的样式。通过添加一个唯一的类名，可以使用层级选择器来覆盖Element Plus组件的样式。例如：

<template><div class="my-component"><el-input class="my-input"></el-input></div>
</template><style scoped>
.my-component .my-input {border-color: red;
}
</style>

这将修改el-input组件的边框颜色为红色，并且只应用于my-component组件内的el-input。

1. 使用 ::v-deep 伪类来修改Element Plus组件。这个伪类可以将样式规则深入到所有子组件中，包括子组件的子组件。例如：

<template><div class="my-component"><el-input><el-button class="my-button"></el-button></el-input></div>
</template><style scoped>
.my-component ::v-deep .my-button {background-color: blue;
}
</style>

这将修改el-button组件的背景颜色为蓝色，即使它是作为el-input组件的子组件出现的。

使用上述方法可以修改Element Plus组件的样式而不影响其他Vue组件的样式。

---

一种可行的方式是通过对 element-plus 组件自带的 style 属性进行修改，而不是修改全局的样式。

具体步骤如下：

1. 打开控制台，选择要修改的组件，查看其元素。比如要修改 ElementPlus 的 Table，可以在控制台中输入 document.querySelector('el-table')，然后回车查看元素。

2. 查看元素的样式属性，复制需要修改的样式属性并修改。比如要修改 Table 的字体大小，可以在控制台中找到 Table 的 .el-table__body td 元素，将其 font-size 属性复制出来并进行修改。

3. 在 Vue 组件中，对应的 element-plus 组件的 style 属性中添加修改后的样式属性即可。比如在 Table 组件中，添加以下代码：

<template><el-table :data="tableData" style="font-size: 16px;"><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table>
</template>

这样，修改后的样式只会作用于当前组件，不会影响到其他组件。

---

要修改 element-plus 组件的内部样式而不影响 Vue 其他组件的样式，可以使用以下方法：

按需引入组件样式

在组件中，可以使用 import 命令按需引入 element-plus 组件的样式，例如：

javascript">import 'element-plus/packages/theme-chalk/src/button.scss'export default {// ...
}

这样只会引入 Button 组件的样式，并不会污染其他组件的样式。

自定义主题

可以通过修改 element-plus 主题文件来自定义组件的样式。在 vue.config.js 中配置 styleResources，并在 main.js 中引入主题文件，例如：

javascript">// vue.config.js
module.exports = {pluginOptions: {'style-resources-loader': {preProcessor: 'scss',patterns: [path.resolve(__dirname, './src/styles/element-plus-variables.scss')]}}
}// main.js
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/lib/theme-chalk/index.css'
import './styles/element-plus-override.scss'createApp(App).mount('#app')

在 element-plus-variables.scss 中配置变量，然后在 element-plus-override.scss 中覆盖组件的样式，例如：

// element-plus-variables.scss
$--color-primary: #42b983;
$--border-radius-base: 4px;// element-plus-override.scss
@import 'element-plus/packages/theme-chalk/src/index.scss';.el-button {border-color: $--color-primary;border-radius: $--border-radius-base;
}

这样就可以在不影响其他组件的情况下，修改 Button 组件的边框颜色和圆角大小。