博客

Vue 中使用 Element-ui 修改默认样式

在使用外部 UI 组件 Element-ui 的过程中，需要覆盖默认样式，自己定义样式。在此记录使用中遇到的问题

1、全局样式

在 vue 项目中，可以创建一个全局样式表，如下图中的 global.css，可以覆盖 UI 组件中的样式，但是有一个缺点，就是整个项目中该类型的组件都会被渲染。



例如：我想要修改 Element-ui 中 el-table 表格的单元格字体大小，可以在 global.css 中写入下列代码。整个项目都会以下字体大小显示。

.el-table{
    font-size: 12px;
}

2、在自定义组件中覆盖默认样式

2.1 修改前的 Element-ui 中 el-input 默认样式

在此想要修改 input 输入框的背景颜色，可以在浏览器中分析其class样式，可以看到背景样式在 .el-input__inner 这个 class 中。


我们可以在自定义组件的 style 样式表中自定义一个 class，将其添加到要渲染的 el-input 中，这里是 back。

<el-input v-model="addCarHostForm.fcarcode" class="back"></el-input>

2.2 style 代码：

scoped 限定了只在当前组件有效，如果去掉了，和全局样式就一样了。我使用了 less 规则，有的可能会不一样，如果没有效果，或者报错，可以试试将

/deep/

替换成

>>>

<style lang="less" scoped>
.back/deep/.el-input__inner{
  background-color: red;
}
</style>

2.3 修改后的样式