怎么修改Element-UI样式的几种方式

1.新的全局样式表

新建 global.css 文件，并在 main.js 中引入。 global.css 文档通常放在 src/asset/style 下

import "./assets/style/global.css"

在 global.css 文件中写入的样式，无论是哪一种 vue 将包括单页内容。 ElementUI 默认样式。

2.在当前vue在单页中添加一个新页面。style标签

在当前的vue单页面的style在标签之后，添加一对新的style标签，新style不要添加到标签上 scoped 。在有 scoped 属性的style标签中的样式不会覆盖ElementUI默认样式

3.使用 /deep/ 深度修改标签样式

找出需要修改的内容ElementUI标签的类名，然后将其添加到类名之前。 /deep/ ，您可以强制修改默认样式。这种方法可以直接使用。 scoped 属性的style标签中。

// 修改层叠选择框的默认宽度
/deep/ .el-cascader {
  width: 100%;
}

4.用内联样式或绑定类样式重写默认样式。

按内联样式style直接覆盖某些标签中的默认样式并不常见。

总结

• 第一次全球推介CSS文件的格式，适用于ElementUI整体修改，例如整体配色
• 第二个代码添加了一个style标签的形式也可以达到修改默认样式的效果，但实际上，因为修改了全局样式，所以就不一样了。vue在修改组件中的相同样式时可能会发生冲突
• 第三条路通过 /deep/ 这条路可以很方便。vue默认样式在组件中修改，并且不与其他页面冲突。
• 第四种内联风格比较有限，也不是很常见。