ElementUI组件的样式修改

文章介绍了如何在Vue项目中自定义全局CSS样式,通过在main.js引入CSS文件来影响ElementUI组件。同时,展示了使用Less和Scss的深度选择器(/deep/或::v-deep)来穿透组件的默认样式,具体示例包括修改输入框组件的高度、内阴影和颜色。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

随笔

这里只提供关键词

1.css

  • 定义一个全局的css文件
  • 在main.js引入该文件,就可以对ElementUI的样式进行修改了

2.less或scss

  • 在Vue的style标签中,使用less或scss
  • 可以使用/deep/ 或 ::v-deep 刺穿的写法

代码

1.main.js

//1.自定义全局css样式
import './assets/css/base.css'

2. less

<style lang="less" scoped>
	/deep/.el-input__inner {
	    box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
	    height: 30px;
	    color: #dc2929;
	  }
  </style>

3.scss

<style lang="scss" scoped>
	::v-deep .el-input__inner {
	    box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
	    height: 30px;
	    color: #dc2929;
	  }
  </style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值