element-ui iview 等组件样式覆盖问题及解决办法

我们在用vue开发项目时常常用到element-ui iview等ui组件，但有时我们需要对其样式进行修改

通常我们进行样式修改，会加入scoped属性用来限制样式的作用域

<style scoped>
.marker {      
  width: 16px;      
  height: 16px;     
  border: 1px solid #2d8cf0;      
  border-radius: 100px;    
  background-color: #2d8cf0;     
  opacity: 0.5;}  
</style>

但这会导致我们修改组件样式失败,下面是我的处理方式：

增加一个没有scoped限制作用域的style放ui覆盖样式

<style scoped>
//页面样式
</style>
<style>
.el-menu--horizontal>.el-submenu .el-submenu__title { 
  height: 70px; 
  line-height: 70px;
 }
</style>

这样一来，ui的样式就被覆盖了；但这是全局覆盖，想要做到局部样式覆盖，我们需要在获取到的样式里加上能限制范围的父层选择器

<style>
.menu>.el-menu--horizontal>.el-submenu .el-submenu__title { 
  height: 70px; 
  line-height: 70px;
 }
</style>

<template>
<div class="menu">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
  </el-submenu>
</el-menu>
</div>
</template>

随后在我进行打包完成，在服务器上进行访问时，样式却失效了，后来通过万能的网友，游侠几个解决方案：

1、你的问题就是css权重问题 如果相同权重可能存在引入顺序问题

简单粗暴解决办法

1）： 如果是单页面 写入index.html里面

2）：直接修改源码的css 很简单~~~

3）：加个！important

2、main.js中引入的顺序，是否和下面一样：

import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

如果相反，那么element-ui的样式会覆盖自定义的样式。

3、在vue-cli中开发模式下，css样式是用js打到head中的style标签里的；而生产环境的css是用extract-text-webpack-plugin生成css文件引入的；这其中的样式优先级是不一样的。一般多写一个选择器增加下优先级就没问题了。