zoukankan      html  css  js  c++  java
  • elementui默认样式修改的问题

    当我们在vue中引入第三方组件库的时候,vue组件中样式的scoped就会成为我们修改样式的阻碍,有以下三种方法修改样式,并且不影响全局样式:
    1 在样式外新增一个样式不添加scoped

    <style>
        .my{
            margin: 20px;
        }
        .my .el-input__inner{
            border-radius: 15px;/* 这个样式起效果 */
        }
    </style>
    <style scoped>
        .my .el-input__inner{
            border-radius: 30px; /* 这个样式不起效果 */
        }
    </style>

    2 使用deep样式穿透

    <style scoped>
        .my .el-input__inner{
            border-radius: 30px;/* 这个不起作用 */
        }
        .my /deep/ .el-input__inner{
            border-radius: 30px;/* 这个起作用 */
        }
    </style>

    3 使用>>>穿透

    <style scoped>
        .my .el-input__inner{
            border-radius: 30px;/* 这个不起作用 */
        }
        .my >>> .el-input__inner{
            border-radius: 30px;/* 这些起作用 */
            border: 1px solid #eceef2;
            outline: 0;
        }
    </style>

    4 有些样式是行内样式权重比较高则需要使用上面的几种方法来保证可以修改样式并且添加上!important来增加权重

    <el-input v-model="input" placeholder="请输入内容" style=" 300px;"></el-input>
    <style scoped>
        .my >>> .el-input__inner{
            border-radius: 30px;
            border: 1px solid #eceef2;
            outline: 0;
            width: 400px!important;
        }
    </style>

    这样input框的宽度就是400px了

  • 相关阅读:
    0455分发饼干 Marathon
    0078子集 Marathon
    python 实现JWT Marathon
    0376摆动序列 Marathon
    0216.组合总和 III Marathon
    028实现strStr() Marathon
    0738单调递增的数字 Marathon
    0051N皇后 Marathon
    0047全排列II Marathon
    0037解数独 Marathon
  • 原文地址:https://www.cnblogs.com/superfeeling/p/14656434.html
Copyright © 2011-2022 走看看