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>