el-tag 更改样式css

### 自定义 Element UI `el-tag` 样式的 CSS 方法 为了自定义 Element UI 的 `el-tag` 组件样式，可以采用多种方法。一种常见的方式是在 `<style>` 或者 SCSS 文件中覆盖默认样式。 #### 使用全局样式文件 如果希望在整个项目范围内应用新的样式规则，可以在项目的全局样式文件（如 `app.scss` 或 `styles/global.css`）中添加特定的选择器： ```css .el-tag { background-color: #f56c6c; color: white; } ``` 这种方式适用于所有未指定特殊样式的 `el-tag` 实例[^2]。 #### 局部作用域内的样式定制 对于局部范围内的样式调整，在 Vue 单文件组件内使用带有 `scoped` 特性的 `<style scoped>` 来限定样式的作用区域是一个不错的选择。下面的例子展示了如何针对 `.tag-container` 下的子元素进行样式化处理： ```html <style scoped> .tag-container .el-tag { margin-right: 8px; white-space: nowrap; } .overflow-tag { cursor: pointer; margin-left: auto; background-color: #f56c6c; /* 不同的背景色以区分 */ color: white; } </style> <template> <div class="tag-container"> <!-- 这里的 el-tag 将会受到上述样式的影响 --> <el-tag>标签一</el-tag> <el-tag type="success">标签二</el-tag> ... </div> </template> ``` 此代码片段不仅改变了普通 `el-tag` 的间距和换行行为，还特别设置了具有`.overflow-tag`类名的关闭按钮外观特性[^1]。 #### 利用深嵌套伪类选择器 (`::v-deep`) 修改内部结构 当需要更深入地控制 `el-tag` 内部的具体部分时——比如改变图标颜色或其他细节，则可以通过 `::v-deep` 嵌套选择器实现这一点。这允许开发者访问并重写框架内部组件的私有样式而不会影响其他地方使用的相同组件实例。 ```scss .screening-config { display: flex; flex-flow: row wrap; width: 100%; > div { display: flex; width: 50%; margin-bottom: 15px; .el-select { // ...省略部分内容... ::v-deep .el-input--suffix { height: 100%; > input { height: 100%; border: 1px solid #0067B1; background-color: transparent; } .el-input__suffix { height: 40px; top: -6px; .el-icon-arrow-up:before { content: ""; color: #98dcff; } } } } } } ``` 虽然这段示例主要关注于 `el-select` 而不是 `el-tag` ，但是同样的原理也适用于任何想要修改其深层 DOM 结构样式的 Element UI 组件[^3]。 #### 动态绑定属性与条件渲染 最后，还可以利用 Vue.js 提供的数据绑定功能动态更改 `el-tag` 的类型或直接设置 `color` 属性来达到个性化显示效果的目的。例如： ```html <el-tag v-for="(item, index) in menuCateMap" v-show="scope.row.type === item.value" :key="index" :type="item.cssName">{{ item.label }}</el-tag> ``` 这里通过遍历数组中的每一项，并根据当前上下文决定是否展示以及赋予何种类型的样式[^4]。