如何修改elementui组件的样式,以及修改的样式不生效问题

时间:2024-04-12 14:59:45

修改elementui组件样式的方法有:
1.根据组件的属性传入相应的样式或者属性值来改变样式(具体属性参考官网):
如:可以通过:header-cell-style来设置表头单元格的样式,:rowStyle来设置表格每一行的样式
如何修改elementui组件的样式,以及修改的样式不生效问题
2.通过class
2.1 通过以下方式来改变el-table标签下的表格偶数行的样式。
如何修改elementui组件的样式,以及修改的样式不生效问题

注意:这个样式必须是全局的才会生效,即style标签不能加scoped,为了避免组件内的其他样式也成为全局样式,可以新建一个style标签放这些组件样式,其他的样式仍然放在style scoped标签里面,另外为了影响该组件在全局默认的样式,最好在属性选择器前面加上本组件的选择器来限制样式,如
如何修改elementui组件的样式,以及修改的样式不生效问题
2.更复杂的情况,我们可以在使用标签后,在浏览器中打开页面,进入开发者模式(F12),查看该标签对应的class(浏览器会把组件都解析成html标签)
如下图是el-input组件的输入框,我们可以看到输入框的class为el-input__inner,右下角有.el-input__inner的样式,有了这个就简单了,我们还是可以通过上面的方法,来修改这个class的样式,还是要注意必须是全局样式,且前面最好加上本组件的选择器。
如何修改elementui组件的样式,以及修改的样式不生效问题
补充:设置全局样式的方法:
1.将样式写在组件的style标签中,不能加scoped
2.在全局的css文件中写入样式,在main.js中引入这个css文件