elementui修改

修改 Element UI 样式或组件

Element UI 是基于 Vue.js 的组件库，修改其样式或行为通常需要以下方法：

全局样式覆盖 在项目的全局 CSS 文件中（如 App.vue 或 main.css）添加自定义样式。通过提高选择器优先级或使用 !important 强制覆盖默认样式：

.el-button {
  background-color: #ff0000 !important;
}

Scoped 样式修改 在单文件组件中使用 scoped 样式，通过深度选择器 >>> 或 /deep/ 修改子组件样式：

<style scoped>
.el-form-item >>> .el-form-item__label {
  font-weight: bold;
}
</style>

主题定制 使用官方主题工具生成自定义主题：

1. 安装主题生成工具：npm i element-theme -g
2. 初始化变量文件：et -i
3. 修改 element-variables.scss 中的变量
4. 编译主题：et

组件扩展 通过继承或包装原有组件创建自定义组件：

import { Button } from 'element-ui'
export default {
  extends: Button,
  props: {
    size: {
      default: 'mini'
    }
  }
}

修改默认配置

在 Vue 项目入口文件（如 main.js）中修改全局配置：

import ElementUI from 'element-ui'

Vue.use(ElementUI, {
  size: 'small',
  zIndex: 3000
})

按需引入优化

使用 babel-plugin-component 实现按需引入以减少体积：

1. 安装插件：npm install babel-plugin-component -D
2. 修改 babel.config.js：

   module.exports = {
   plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
   ]
   }

动态主题切换

通过 CSS 变量实现运行时主题切换：

document.documentElement.style.setProperty('--el-color-primary', '#ff0000')

需配合预处理器的变量替换功能使用。

注意事项

• 修改组件内部结构可能导致版本升级时出现兼容性问题
• 深度选择器在 Vue 3 中需要使用 :deep() 替代 >>>
• 主题变量修改后需要重新编译生效
• 按需引入时需确保样式文件也被正确引入