ElementUI组件的样式修改

Geoffwo

于 2023-04-15 15:00:13 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/wgx_0504/article/details/130170159

vue 专栏收录该内容

9 篇文章

订阅专栏

文章介绍了如何在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>