项目中如何修改UI框架的默认样式

我们在使用elementUI时，只能使用框架自带的样式，普通的修改方法并不能实现，我整理了下面几种修改样式的方法。

1. 行内修改样式

通过在行内设置style修改，用于局部组件块

<el-button style="color: white;margin-top:20px;>默认按钮</el-button>

2. scoped问题

这里因为给 style 设置了 scoped ，所以无法修改样式，可以去掉 scoped 。

注意：此时该样式会污染全局样式，可以把它放在公共的css里面 为了不让所有的el-input标签都是该样式，可以在HTML给改input加上一个类名，比如 modInput

3. deep样式穿透方法

在不去掉 scoped 的情况下，我们可以使用 /deep/ 来更改样式

/deep/.el-timeline-item__node {
  background-color: rgb(255, 208, 75) !important;
}

4. 使用 >>>

在不使用 less / sass 的情况下，推荐使用 >>>

注：less/sass 预处理无法解析 >>>.在这种情况下你可以采用/deep/来代替 >>> 从而达到深度修改组建的样式。