如何修改页面中的一个el-message提示框样式
时间: 2024-02-05 18:03:33 浏览: 111
可更改样式的提示
要修改页面中的一个 `el-message` 提示框的样式,你可以使用以下方法:
1. 通过 `CSS` 修改全局样式
在你的 `CSS` 文件中添加以下代码:
```css
.el-message__content {
background-color: #f0f0f0;
color: #000000;
font-size: 14px;
}
```
这会将所有 `el-message` 提示框的背景颜色、文字颜色和字号修改为你定义的样式。
2. 通过 `props` 修改局部样式
在 `el-message` 组件中,你可以使用 `props` 来修改局部样式。例如,你可以在组件中添加以下代码:
```html
<el-message
message="这是一条提示信息"
type="success"
:show-icon="true"
:duration="3000"
:offset="50"
:center="false"
:custom-class="'my-message'"
></el-message>
```
这会将这个 `el-message` 提示框的样式修改为 `my-message` 类的样式。你可以在你的 `CSS` 文件中添加以下代码:
```css
.my-message .el-message__content {
background-color: #f0f0f0;
color: #000000;
font-size: 14px;
}
```
这会将这个 `el-message` 提示框的背景颜色、文字颜色和字号修改为你定义的样式。
阅读全文