修改Element-ui组件的样式无效?

news/2024/7/11 0:39:23 标签: html, html5, vue.js, css3, es6

框架vue2.0,使用element中自有些组件样式不合心意,但是在style中改不过来?
1,想将某个组件样式全局统一,通过控制台f12查看组件类名,在App.vue的style里面,写入要修改的样式,style不可加‘scoped’属性,这样的话,你在App.vue写入的样式会引用在每个页面

<style lang="less">
	// 分页器组件
	.el-pagination{
	    padding: 8px 5px;
	    background: rgba(0,0,0,.2);
	}
</style>

2,只想在某个页面修改组件样式,同样查看组件类名,假如类名是:.hover-row,他的父级容器是你自己写入的dom,类名是:.box,然后在style标签下写(前提是你的css预处理是less):

<style lang="less" scoped>
	// .hover-row组件类名, 有时候组件样式是行间,所以加important
	.box /deep/  .hover-row{
		color:#ddd !important;
	}
</style>

如果还是改不了,就在这个页面本身的style标签外面再写一对style标签,不要加scoped属性,但是修改的时候,还是要加他的父级类名,否则只要打开这个页面,之后,这个样式便还是应用到全局:

<style lang="less" scoped>
	
</style>
<style lang="less">
	// .hover-row组件类名, 前面加上父级类名,防止应用全局
	.box /deep/  .hover-row{
		color:#ddd !important;
	}
</style>

做人,最重要的是开心嘛,der
在这里插入图片描述


http://www.niftyadmin.cn/n/1845644.html

相关文章

Flutter 动画鼻祖之CustomPaint

老孟导读&#xff1a;CustomPaint可以称之为动画鼻祖&#xff0c;它可以实现任何酷炫的动画和效果。CustomPaint本身没有动画属性&#xff0c;仅仅是绘制属性&#xff0c;一般情况下&#xff0c;CustomPaint会和动画控制配合使用&#xff0c;达到理想的效果。 基本用法 Custom…

vue2.0+Vant-ui的日期选择器type

前段时间搞了个公众号&#xff0c;我用的Vant-ui&#xff0c;Vant官方网站&#xff0c;毕竟是有赞团队开发的&#xff0c;项目需求有个地方用到日历&#xff0c;这个组件&#xff1a; <van-datetime-pickerv-model"currentDate":type"dateType"cancel&…

【Flutter组件终结篇】332个组件 658页PDF

老孟导读&#xff1a;历时1年的时间&#xff0c;整理完成了330组件的详细用法&#xff0c;不仅包含UI组件&#xff0c;还包含了功能性的组件。 虽然整理了 330的组件基本用法&#xff0c;但并不是让你每一个都学习一遍&#xff0c;任何技术基本都是掌握 20%就可以解决 80%的问题…

【Flutter实战】移动技术发展史

老孟导读&#xff1a;大家好&#xff0c;这是【Flutter实战】系列文章的第一篇&#xff0c;这并不是一篇Flutter技术文章&#xff0c;而是介绍智能手机操作系统、跨平台技术的演进以及我对各种跨平台技术看法的文章。 智能手机操作系统 塞班&#xff08;Symbian&#xff09;系…

vue2.0封装axios公共请求方法(promise)

在vue项目src文件夹目录下新建文件夹api&#xff0c;然后在此文件夹下新建axiosConfig.js&#xff1a; import axios from axios import qs from qs import { Toast } from vant; import router from ../router/index// 默认配置 axios.defaults.withCredentials false // ax…

Flutter实战】文本组件及五大案例

老孟导读&#xff1a;大家好&#xff0c;这是【Flutter实战】系列文章的第二篇&#xff0c;这一篇讲解文本组件&#xff0c;文本组件包括文本展示组件&#xff08;Text和RichText&#xff09;和文本输入组件&#xff08;TextField&#xff09;&#xff0c;基础用法和五个案例助…

vue2.0使用better-scroll

better-scroll使用方法better-scroll文档说明。这是一款在移动端灰常好用的插件&#xff0c;移动端要兼容安卓和ios滑动不顺畅的问题&#xff0c;这个插件就可以完美解决&#xff0c;而且该插件还有上拉加载、下拉刷新等等功能&#xff0c;具体可以看官方。我的项目中有几个页面…

@Transactional导致切换动态数据源失败

背景&#xff1a; Spring Cloud项目中&#xff0c;两个数据库&#xff0c;业务数据库是主数据库&#xff0c;管理员数据库是其他数据库&#xff0c;在删除管理员数据库时&#xff0c;报错。 相关代码&#xff1a; mapper层&#xff1a; Mapper DS(DynamicDataSource.ADMIN_DB…