我们在用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文件引入的;这其中的样式优先级是不一样的。一般多写一个选择器增加下优先级就没问题了。