• 关于element-ui的样式覆盖问题


            在企业项目的实际开发中,组件所提供的样式有时是不能够完全满足实际的需求样式,比如:内外边距、组件背景色与原型图不符合等等。这时候我们就需要通过修改组件的内置Class值或者Id值来实现目的效果。

            所以,我总结了以下几种样式深度覆盖的方法来提供参考:

    • ! important

    CSS 中的 ! important 规则用于增加样式的权重。! important 与优先级无关,但它与最终的结果直接相关,使用一个 ! important 规则时,此声明将覆盖任何其他声明。

    实例:

    1. .myclass {
    2. background-color: gray !important;
    3. }
    • >>>、/deep/、::v-deep

    三者都起到了样式深度覆盖的作用,但>>>只作用与css,因为sass/less的话可能无法识别,这时候需要使用 /deep/::v-deep 选择器。

    实例:

    1. <style scoped lang="scss">
    2. /deep/ .title{
    3. color: #ff0;
    4. }
    5. ::v-deep .title{
    6. color: #ff0;
    7. }
    8. style>
    • 新建一个标签

    当以上两种情况无法实现样式深度覆盖时,就需要新建一个标签,进行样式覆盖。这是因为与标签中scoped属性冲突了,但你如果不使用scoped会导致组件样式全局化。这时候就可以新建一个标签来存放想要深度覆盖的标签样式(一个.vue文件允许多个style)。

    1. <style scoped>
    2. .el-divider--horizontal {
    3. margin: 8px 0;
    4. background: 0 0;
    5. border-top: 1px dashed #e8eaec;
    6. }
    7. style>

    注意:

    需要注意的是,你需要重新给你想要深度覆盖的标签赋予新的class值,以防样式渲染到其他界面的相同组件(使用element-ui的话,每个界面的所使用的组件的class值是一致的)。

  • 相关阅读:
    【开题报告】基于SpringBoot的非文化遗产宣传平台的设计与实现
    JAVA 枚举的基础、应用和原理
    解密京东面试:如何应对Redis缓存穿透?
    【优化调度】基于改进遗传算法的公交车调度排班优化的研究与实现(Matlab代码实现)
    iTOP-3568开发板Android11 proc文件系统查询
    MySQL查漏补缺
    Python字典(dict)的操作方法汇总(约18种操作方法),并附示例代码
    27、字符串字面量类型
    【无标题】未完成
    Java网络编程——NIO三大组件Buffer、Channel、Selector
  • 原文地址:https://blog.csdn.net/weixin_48168510/article/details/127446746