修改ElementUI默认样式的几种方法（总结）

ElementUI是一套UI组件库，目前最新版本的react、vue等主流框架都支持。该库的默认主题颜色是天蓝色。如果是用于项目开发，难免需要修改它的默认样式。本文介绍了基于react和vue框架修改ElementUI默认样式的几种方法。

ElementUI下载官网：http://www.sychzs.cn/#/zh-CN

Vue

安装：

npm i element-ui -S

用途：

从“vue”导入 Vue；
从“element-ui”导入 ElementUI；
导入'element-ui/lib/theme-chalk/index.css';
从“./App.vue”导入应用程序；
 
Vue.use(ElementUI);
 
新Vue({
 el: '#app',
 渲染：h => h(应用程序)
});

(1) 使用内联方法修改样式

由:style修改，用于本地组件块：

默认按钮

(2)：类参考修改样式

由 :class 修改，用于本地组件块：

默认按钮

(3)导入和修改样式

通过import导入样式文件。如果在main.js中导入css，就意味着全局引用。可用于局部组件块和全局组件：

效果和下面的el按钮一样
默认按钮


 
/* 按钮.css */
.el-按钮{
 白颜色;
 顶部边距：10px；
 宽度：100px；
 背景颜色：cadetblue；
}
 
.self按钮{
 白颜色;
 顶部边距：10px；
 宽度：100px；
 背景颜色：cadetblue；
}
 
.self-button:悬停{
 颜色：黑色;
 背景颜色：白烟；
}

反应

安装：

npm install element-react -S
npm install element-theme-default -S

用途：

从“反应”导入反应；
从'react-dom'导入ReactDOM；
从'element-react'导入{按钮}；
 
导入“元素主题默认”；
 
ReactDOM.render(Hello, document.getElementById('app'));

(1) 使用内联方法修改样式

从'element-react'导入{按钮}；
 
函数应用程序（）{
 使成为（） {
 常量样式 = {
  白颜色”，
  顶部边距：“10px”，
  宽度：“100px”，
  背景颜色：“军校蓝”
 }
 返回（
       
       你好
      
 ）；
 }
}

(2) 提高优先级并修改样式

导入样式文件，通过className引用样式。需要在样式文件中使用!import来提高优先级，否则无效。

导入'../style/button.css'
从'element-react'导入{按钮}；
 
函数应用程序（）{
 使成为（） {
 返回（
  
              效果与下面Button相同
      你好
   
 ）；
 }
}
 
/* 按钮.css */
.el-按钮{
 颜色：白色！重要；
 顶部边距：10px！重要；
 宽度：100px！重要；
 背景颜色：cadetblue！重要；
}
 
.self按钮{
 颜色：白色！重要；
 顶部边距：10px！重要；
 宽度：100px！重要；
 背景颜色：cadetblue！重要；
}
 
.self-button:悬停{
 颜色：黑色！重要；
 背景颜色：whitesmoke!important;
}

本文关于如何修改ElementUI默认样式的几种方法（总结）就到此结束了。更多关于如何修改ElementUI默认样式的信息，请在来客网搜索之前的文章或者继续浏览下面的相关文章。今后请多多支持莱客网！