elementui修改对话框样式

如果你想要修改 Element UI 的对话框样式，可以使用以下两种方法：

1. 使用自定义主题

你可以使用 Element UI 的主题生成工具，根据自己的需求生成一个自定义主题，然后在项目中引入该主题即可。具体操作步骤如下：

- 安装 element-theme

npm install element-theme -g

- 初始化主题

et -i

- 选择需要修改的主题

请选择你想要的主题:
   1. element-theme-default
   2. element-theme-chalk
   3. element-theme-ali
   4. element-theme-dark
? 请输入编号 (default: 1)

- 修改主题

在生成的主题文件中，可以修改对话框的样式，例如：

// 修改对话框标题的字体大小
@dialog-title-font-size: 16px;

// 修改对话框的背景色
@dialog-bg-color: #f5f5f5;

// 修改对话框的阴影效果
@dialog-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

- 编译主题

et

- 引入主题

在项目中引入生成的主题即可。

2. 使用 scoped 样式

如果只需要针对某个页面或组件修改对话框样式，可以使用 scoped 样式，具体操作步骤如下：

- 在组件中添加 scoped 属性

<template>
  <el-dialog class="my-dialog" :visible.sync="dialogVisible">
    ...
  </el-dialog>
</template>

<style scoped>
.my-dialog {
  /* 修改对话框样式 */
  font-size: 16px;
  background-color: #f5f5f5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>

- 在样式中使用 /deep/ 或 >>> 选择器

如果组件中的样式无法覆盖对话框的样式，可以使用 /deep/ 或 >>> 选择器，例如：

<template>
  <el-dialog class="my-dialog" :visible.sync="dialogVisible">
    ...
  </el-dialog>
</template>

<style scoped>
.my-dialog /deep/ .el-dialog__title {
  /* 修改对话框标题样式 */
  font-size: 16px;
}
</style>