elementUI样式修改未生效问题详解(挂载到了body标签上)

下面是关于如何解决“elementUI样式修改未生效问题详解(挂载到了body标签上)”的攻略。

问题描述

在使用elementUI框架进行开发时，因为某些原因需要将所有组件的样式挂载到body标签上，但是修改样式后发现并没有生效，并且没有报错信息。

原因分析

这个问题的原因在于elementUI组件的样式是基于scoped CSS实现的，因此组件的样式只能影响到组件内部的元素，而无法影响到它的外部元素，而将所有组件的样式挂载到body标签上的做法违背了这个原则，导致样式无法生效。

解决方案

下面提供两种解决方案供参考：

方案一：修改配置

可以修改elementUI的配置使其不使用scoped CSS。

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI, { 
    size: 'small', 
    zIndex: 3000, 
    scoped: false // 禁用scoped CSS 
});

方案二：使用CSS全局样式

如果要修改elementUI的样式，可以在全局中添加相应的样式。

/* global.css */

/* 修改整个应用中所有el-button的border-radius */
.el-button {
    border-radius: 20px;
}

/* 修改el-table组件中的表头样式 */   
.el-table__header-wrapper {
    background: #f5f5f5;
    font-weight: bold;
}

然后在main.js中引入该全局样式。

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './global.css'; // 引入全局样式

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

这样就可以实现修改elementUI样式的目的了。

总结

在使用elementUI框架时，需要注意到scoped CSS的特性。如果要修改elementUI的样式，可以通过修改配置或添加全局样式的方式实现。