使用Element-UI中无法改变样式的问题

总结:

1.单独页面内使用important引入elementUI

2.不使用scoped,使用less或者sass防止样式冲突

3.使用/deep/深度选择器。

使用element-ui经常会遇到给出的格式达不到要求的情况，我们需要对这部分样式进行修改。

使用element-ui的时候一般是在main.js里面引入并使用

比如我们修改dialog弹框的默认颜色。我们在控制台打开可以看到的dom结构。

我们的css是这样的

然而我们的样式却并没有加上

这是因为当我们进行修改，我们为了避免样式的冲突，一般会在style标签上写上scoped来避免冲突，这就造成了我们对element-ui无法修改的问题

当我们把scoped删除之后可以看到样式是可以加上去的，那是因为使用scoped的时候编译全局引用的会覆盖写的css。

不过，在我们项目中有不能把scoped删除，我们还可以不使用全局的引用的css，在使用element-ui的组件或者页面单独调用。

这样就可以解决样式难以改变的问题。

但我们并不想使用单个这样的引用的时候，那就要使用css预编译的scss和less了，因为scss和less的特性，我们用父盒子去包裹子盒子去修改样式，这样就能解决样式之间互相冲突的问题

但是element-ui给我们又一个难题在select组件里面，我们想要修改下拉框的时候采取之前的方法都是不可以的，原因就是它的下拉框并不在#app里面

当然element-ui也给我们提供了解决办法

只要在el-select标签里面加上:popper-append-to-body="true"这个属性就可以啦。