vue中element-ui组件默认css样式修改的四种方式

当使用 Element-UI 这个基于 Vue.js 开发的 UI 组件库时，我们可能需要修改一些组件的默认样式以满足项目需求。下面将介绍四种不同的方式来实现这个目标。

1. 在全局 CSS 中修改默认样式

我们可以在项目的全局 CSS 文件中修改组件的默认样式。具体步骤如下：

1. 在你的项目全局 CSS 文件中调用 Element-UI 的默认样式表，该文件通常位于 node_modules/element-ui/lib/theme-chalk/index.css
css
@import "~element-ui/lib/theme-chalk/index.css";

2. 以需要修改样式的组件为例，我们可以使用其官方文档中列出的类名进行样式修改。比如，我们要修改 el-button 组件的默认样式，它的默认样式类名是 el-button。将修改后的样式添加到全局 CSS 中即可生效。
   css
.el-button {
background-color: #409EFF;
}

2. 在单文件组件中修改默认样式

如果我们不想全局改变样式，而是只想修改某些组件的样式，那么可以在单文件组件中进行样式修改。具体步骤如下：

1. 在需要修改的单文件组件中，使用 :deep 伪类和组件类名来修改组件的默认样式。
   ```html
   

```

3. 通过 $style 修改默认样式

使用 Element-UI 时，在实例化 Vue.js 之前，我们可以通过 $style 属性直接修改组件的默认样式。具体步骤如下：

1. 以 el-button 组件为例，在 Vue.js 实例化之前，先通过 $style 覆盖它的样式即可。
   ```html
   

```

4. 通过样式修改变量修改默认样式

与前面三种方式不同，该方法是通过修改变量来改变组件的默认样式。这种方式需要引入 node-sass 和 sass-loader 。具体步骤如下：

1. 安装 node-sass 和 sass-loader 依赖。
   npm install node-sass sass-loader --save-dev

2. 使用 Element-UI 的预设 SCSS 变量来覆盖默认样式。为了给 SCSS 变量赋值，我们可以在 scss 文件中重新定义这些变量，然后使用这些变量来覆盖组件的默认样式。
   ```scss
   $--color-primary: #409EFF;

@import '~element-ui/packages/theme-chalk/src/index';

.el-button {
background-color: $--color-primary;
border-color: $--color-primary;
color: #fff;
}
```

以上就是常用的四种修改 Element-UI 组件默认样式的方法。通过这些方法，我们可以方便地自定义 Element-UI 组件样式并满足不同的项目需求。