总结:
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"这个属性就可以啦。