【vue&elementui】自定义样式如el-dialog等、修改源码等

在Vue中使用Element UI时，如果需要自定义样式，可以通过以下几种方法：

1. 使用CSS覆盖：直接在项目的CSS文件中为需要修改样式的元素添加相应的选择器，并设置新的样式属性。

/* 覆盖Element UI的el-dialog样式 */
.el-dialog {
  background-color: #f0f0f0; /* 修改背景颜色 */
  /* 其他样式 */
}

2. 使用深度选择器：如果要修改嵌套组件的样式，可以使用>>>、/deep/或::v-deep来实现穿透组件边界。

/* 使用>>> */
.el-dialog >>> .el-dialog__header {
  background-color: #3498db;
}
 
/* 使用/deep/ */
.el-dialog /deep/ .el-dialog__body {
  color: #1e88e5;
}
 
/* 使用::v-deep */
.el-dialog::v-deep .el-dialog__footer {
  border-top: 1px solid #1e88e5;
}

3. 使用Vue的scoped样式：如果你在单文件组件(.vue文件)中使用样式，并且希望它只影响当前组件，可以使用scoped属性。

<style scoped>
.el-dialog /deep/ .el-dialog__title {
  color: #ff0000;
}
</style>

4. 修改Element UI的源码：如果上述方法不能满足需求，且需要对所有实例做出修改，可以考虑修改Element UI的源码。

• 克隆Element UI的仓库到本地。
• 修改源码中对应组件的样式。
• 在项目中使用修改后的Element UI版本。

// 修改Element UI的源码
// 例如，在packages/dialog/src/main.vue中修改样式
<template>
  <!-- ... -->
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style scoped>
.el-dialog {
  /* 修改样式 */
}
</style>

• 重新编译并使用修改后的Element UI库。

注意：直接修改源码不推荐在生产环境中使用，因为这会使得版本控制和更新变得复杂。应该尽可能地通过CSS覆盖的方式来实现样式的自定义。