elementui css
ElementUI CSS 使用指南
ElementUI 是基于 Vue.js 的组件库，其 CSS 样式系统采用 BEM 命名规范，并支持主题定制。以下为关键使用方法和注意事项：
基础样式引入 在项目中引入 ElementUI 的完整 CSS 文件：
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">或通过 npm 安装后按需引入：
import 'element-ui/lib/theme-chalk/index.css'样式覆盖方法 通过更高优先级的选择器覆盖默认样式：
.el-button {
border-radius: 0 !important;
}使用深度选择器修改组件内部样式（Vue 环境）：
::v-deep .el-input__inner {
background-color: #f0f0f0;
}主题定制流程
- 安装主题生成工具：
npm i element-theme -g - 初始化变量文件：
et -i - 修改生成的
element-variables.scss中的颜色变量 - 编译主题：
et
布局系统使用 ElementUI 提供 24 分栏栅格系统：
<el-row :gutter="20">
<el-col :span="6"></el-col>
<el-col :span="18"></el-col>
</el-row>响应式断点 内置响应式断点与对应类名：
xs(<768px)sm(≥768px)md(≥992px)lg(≥1200px)xl(≥1920px)
动画处理 组件提供过渡动画类名：
.el-fade-in-linear-enter-active {
transition: all .3s linear;
}注意事项
- 修改默认样式时建议添加自定义 class 避免污染全局样式
- 主题变量修改后需要重新编译
- 使用 scoped CSS 时需配合深度选择器
- 栅格系统需配合
el-row和el-col使用
常见问题解决方案
样式不生效问题
检查 CSS 引入顺序确保 ElementUI 样式优先于自定义样式，或使用 !important 提升优先级。
组件尺寸调整 通过修改基础变量统一调整：
$--font-size-base: 14px !default;自定义主题保存
编译后的主题文件需放置在 public 或 static 目录，并在入口文件引入。
按需加载样式 配合 babel-plugin-component 实现：
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
