element-plus怎么和css联系起来，并代码举例说明

Element Plus是一个基于Vue.js的开源UI组件库，它本身已经内置了CSS样式。当你开始使用Element Plus时，它的组件默认会应用相应的CSS规则来呈现组件的外观。然而，如果你想自定义组件的样式或者添加额外的CSS，可以按照以下步骤操作：

1. **全局样式**：如果你想要改变Element Plus的整体样式，可以在项目根目录下创建一个`global.css`或`styles.scss`文件，并导入Element Plus的全局CSS文件。例如，在Vue CLI项目中，这通常是`@element-plus/theme-chalk/index.css`。

<!-- global.css 或 styles.scss -->
@import '~element-plus/theme-chalk/index.css';

2. **局部样式覆盖**：如果你想修改特定组件的样式，可以在每个组件的`.vue`文件的`<style>`标签内编写你的CSS，或者在该组件的单独CSS文件里。例如，假设你想更改`el-button`的背景颜色：

<template>
  <button :class="{ customClass: true }">自定义按钮</button>
</template>

<style scoped>
.el-button.customClass {
  background-color: pink;
}
</style>

3. **利用SASS、Less等预处理器**：如果你熟悉SASS或Less，也可以将其引入项目中并编写变量和混合，然后引用Element Plus的CSS模块。

4. **CSS Modules**：如果Element Plus支持CSS Modules，那么你需要在导入时指定`isModule: true`，并在需要的地方使用`::v-deep`或`deep`来选择器包裹你的定制样式。

<style lang="scss" scoped>
$custom-color: pink;

.el-button::v-deep {
  background-color: $custom-color;
}
</style>