Element 和iview UI的样式覆盖

当然,在自己编写的容器中我们可以直接定义,但是在我们使用了其他的UI组件之后,我们会发现,在scoped中改变的样式并不能影响到样式了。因为我们是在全局中对其样式进行引入的,所以在自己规定的小区域内的改变并不能影响到他,但是直接写一个在这里面进行修改则又会影响到全局的样式。接下来我们讲一下解决方法。

在Element-UI中覆盖样式
Element-UI跟IView覆盖的方式有点不同。在对Element-UI的样式进行覆盖时,我们需要在

中进行全局影响,而不可以在

中进行修改。如果有需要的话,写两个,一个带scoped,一个不带也是可以的。

之后我们在Element-UI的组件上给他加一个父层样式选择器

然后在样式中这样进行覆盖

这样做,在进行样式判断的时候会顺着层次顺序,只修改fatherclass下面的dialog的样式,这样就影响不到全局的样式了。

在IView中覆盖样式
IView中,则需要在外层套接一个容器,直接在组件上增加父层样式选择器是不起作用的。

具体做法如下

我们在组件外面套接了一层自己的容器,之后进行样式改变

这样就成功了!可喜可贺,可喜可贺!

TIP:
1.定义的父层样式选择器可以不进行样式的编写,因为他们只是为了方便我们定义一个固定的影响区域。

2.如何找到我需要修改的样式名称

打开控制台,去页面上寻找

之后在

去寻找你需要修改的样式,调节好之后直接把样式复制到你的代码中就可以了。
--------------------- 
作者:Super-aoao 
来源:CSDN 
原文:https://blog.csdn.net/My_Asd2/article/details/81295891 
版权声明:本文为博主原创文章,转载请附上博文链接!

你可能感兴趣的:(Element 和iview UI的样式覆盖)