如何修改Element-UI的默认样式

Element-UI

Element-UI有什么用？

给谁用？

这是一套专门为开发者，设计师和产品经理准备的基于Vue2.0的组件库，提供配套设计资源，帮助网站快速成型

有什么特点？

• 一致性：与生活一致，与界面一致
• 反馈Feedback
• 效率Efficiency
• 可控Controllability

如何修改Element-UI的样式

1. 建立一张单独的样式表，一般建在src/assert/style中，用于在全局引入，适合对Element-ui的整体修改，比如整体配色的修改
2. 在原本的组件上多添加一个style标签，这样也可以修改样式，但是需要特别注意的是当你给不同组件实例中添加的类名相同，修改的时候同一个样式有可能会发生冲突【因为修改的是全局的样式】
3. 通过/deep/强制修改Element-ui的默认样式，也可以应用到scoped中，不会和其他页面发生冲突
4. 通过内联样式或者绑定类样式覆盖默认样式【局限性太大，不推荐使用】

• 内联样式：

<el-button :style="test">默认样式</el-button> 
<script> 
    export default{    
		data(){        
            return{           
                test:{                
                    color:'white',  
                    .....            
                }       
            }    
        } 
	} 
</script>

• 绑定类样式覆盖：

<el-button :class="[test]"></el-button>   
<script> 
    export default{    
        data(){        
            return{            
                test:'test'        
            };    
        } 
	} 
</script>  
<style scoped> 
    .test{   
        color:'white';  
        ....  
    }
</style>