Vue+element-ui 重置組件樣式的寫法


兩種方式實現element-ui組件的樣式

方案1:重置的公共組件樣式的寫法如下

然后在main.js中引入

import '@/assets/css/element.css'
 
方案2:每個.vue文件 - 組件的細節調整
<template>
  // 給根元素綁定一個id
    <div id="home">
    </div>
</template>
 
 在style標簽里面分兩種情況 參照鏈接地址:https://www.cnblogs.com/goloving/p/9119265.html
 
第一種 帶scoped(dom和css具有hash值,也就是唯一標識)
 
因為scoped屬性使得元素帶有hash值,又因為element-ui組件的dom是動態生成的,所以css的hash值匹配不到dom元素上,所以使用>>>或者/deep/
 
(css的寫法)
<style scoped>
#home  >>>  .el-button {
color:red;
}
</style>
 
(less的寫法)
<style lang="less" scoped>
#about{
         /deep/ .el-button{
               color: violet;
               background: darkblue;
        }
}
</style>
 
第二種 不帶scoped(和平常的寫法一樣)
 
<style>
#home   .el-button {
color:red;
}
</style>
 
 

 


免責聲明!

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



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