修改ElementUI样式的几种方式
1、 新建global.css文件,并在main.js中引入2、 在gloabal.css文件中写的样式,无论在哪一个vue单页面都会覆盖ElementUI默认的样式1、 当前vue单页面的style标签后,添加一对新的style标签,新的style标签中不要添加scoped属性1、 找到需要修改的ElementUI标签的类名,在类名前加上/deep/,可以强制修改默认样式- 这种方式可以直接用到
·
一、新建全局样式表
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组件的默认样式【亲测有效】
更多推荐
已为社区贡献1条内容
所有评论(0)