修改ElementUI样式的几种方式

一、新建全局样式表

1、 新建global.css文件,并在main.js中引入

  • global.css文件一般都放在src --> assets静态资源文件夹下的style文件夹下,在main.js的引用写法:
    import './assets/style/gloabal.css'

2、 在gloabal.css文件中写的样式,无论在哪一个vue单页面都会覆盖ElementUI默认的样式

二、在当前-vue-单页面中添加一个新的style标签

1、 当前vue单页面的style标签后,添加一对新的style标签,新的style标签中不要添加scoped属性

三、使用/deep/深度修改标签样式

1、 找到需要修改的ElementUI标签的类名,在类名前加上/deep/,可以强制修改默认样式
- 这种方式可以直接用到有scoped属性和的style标签中

// 修改级联选择框的默认宽度
/deep/.el-cascader {
	width: 100%;
}

2、 具体例子可参考:
如何修改ElementUI组件的默认样式【亲测有效】

  • 12
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值