elementui 样式

ElementUI 样式定制方法

ElementUI 提供多种方式定制组件样式，包括全局主题色修改、局部样式覆盖、CSS 变量控制等。

全局主题色修改 通过 SCSS 变量覆盖默认主题色，需在项目中创建样式文件（如 element-variables.scss）：

$--color-primary: #FF5722;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";

局部样式覆盖 使用深度选择器修改特定组件样式，避免全局污染：

/* 使用 ::v-deep 或 /deep/ */
.el-button::v-deep {
  border-radius: 8px;
}

CSS 变量动态控制 利用 CSS 原生变量实现运行时动态换肤：

:root {
  --el-color-primary: #E91E63;
}
.el-button {
  background-color: var(--el-color-primary);
}

常见样式问题解决方案

表单元素间距调整 通过修改默认 margin 值控制表单项间距：

.el-form-item {
  margin-bottom: 20px;
}

表格样式优化 自定义表格行高和边框样式：

.el-table {
  th {
    height: 60px;
  }
  .cell {
    line-height: 1.8;
  }
}

响应式布局适配 结合媒体查询实现不同屏幕尺寸下的样式适配：

@media (max-width: 768px) {
  .el-dialog {
    width: 90% !important;
  }
}

样式覆盖注意事项

1. 优先使用 ElementUI 提供的 CSS 变量或 SCSS 变量进行定制
2. 需要提高选择器权重时，可添加父级类名限制作用域
3. 动态主题切换推荐使用 CSS 变量方案
4. 避免直接修改 node_modules 中的源文件

主题生成工具使用

ElementUI 官方提供主题生成工具（可通过 et --help 调用），具体流程：

1. 安装主题工具：npm i element-theme -g
2. 初始化变量文件：et -i
3. 编译主题：et -w
4. 输出路径配置在 element-variables.scss 中完成