兩種方式實現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>