两种方式实现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>