element-plus 全局修改button样式
时间: 2023-07-18 16:03:16 浏览: 1291
要全局修改 element-plus 中的 button 样式,可以使用 CSS 的全局选择器和 Element Plus 提供的自定义主题功能。
首先,在 main.js 中引入 Element Plus 的样式:
```javascript
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const app = createApp(App);
app.use(ElementPlus);
```
然后,在项目中新建一个自定义主题文件,例如 `theme.scss`,在该文件中编写修改样式的代码,例如:
```scss
// 修改 button 的背景色和文字颜色
.el-button {
background-color: #42b983;
color: #fff;
}
```
最后,在项目中引入该自定义主题文件,在 main.js 中添加以下代码:
```javascript
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import './theme.scss'; // 引入自定义主题文件
const app = createApp(App);
app.use(ElementPlus);
```
这样就可以全局修改 Element Plus 中的 button 样式了。注意,自定义主题文件的引入顺序需要在 Element Plus 样式文件之后,否则会被覆盖。
阅读全文