修改element-ui默認屬性


補充:使用/deep/ 防止修改默認屬性影響全局樣式
(1)在需要更改的組件里新增一個style標簽【重點:不要加scoped】,然后直接獲取class設置樣式
(2)/deep/; .resourceDig為我們要修改組件類名的父級組件樣式類名。

修改element ui默認的樣式
如果要組件內全局修改
首先在瀏覽器里F12找到element默認的UI類名
找到要修改的默認類名以后
在文件中修改代碼,重寫屬性

<style>
.el-form-item__label{
    /* 你要修改的CSS屬性 */
}
</style>

但是如果已經在全局內修改了默認樣式,但又想在某一個標簽內再次重寫樣式,則可以給要修改的標簽加一個父類,在父類里重寫樣式,這樣可以避免代碼污染,也可以叫做局部修改

<el-form-item class="demo">
     <el-input v-model="name"></el-input>
</el-form-item>
<style>
.demo {
    .el-form-item__label{
    /* 重新定義的CSS屬性 */
    }    
}
/* 如果不可以,則改成: */
.demo .el-form-item__label{
    /* 重新定義的CSS屬性 */   
    }    
</style>

例子:修改走馬燈默認容器高度,以及左右按鈕位置

注意:style標簽內不要加scoped不然樣式會失效

<style >
  .el-carousel__container {
    height: 600px !important;
  }
  .el-carousel__arrow--left {
    left: -35px !important;
    top: 55% !important;
  }
  .el-carousel__arrow--right {
    right: 0px !important;
    top: 55% !important;
  }
</style>

參考博客:https://blog.csdn.net/weixin_41041379/article/details/81706743


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM