injected stylesheet 导致页面重置按钮文字样式改变，按钮中的文字看不清晰

news2024/12/24 7:08:14

项目场景：

相关背景：

injected stylesheet 导致页面重置按钮文字样式改变，看不清晰

问题描述

遇到的问题：
在这里插入图片描述

检查页面中该按钮的代码如下所示：

<div class="el-form-item__content">
<button data-v-dcdecdb6="" type="button" class="el-button el-button--default el-button--mini">
<span><i data-v-dcdecdb6="" aria-hidden="true" class="fa fa-refresh"></i>重置
</span>
</button>
</div>

在这里插入图片描述
查看样式：

发现有如上图所示样式，但该样式不是自己代码中所设置的样式

原因分析：

分析问题：

injected stylesheet 注入样式后，可能会导致 el-button 组件内的文字变为空白，通常是由于样式冲突或样式覆盖的问题。

我们先排查一下可能得原因及解决方法：

检查样式优先级：

确保你的自定义样式或第三方样式没有覆盖 el-button 组件的文本颜色。你可以使用浏览器的开发者工具检查 el-button 组件的样式，查看哪个样式规则对其产生了影响。
检查字体颜色：

确保 el-button 组件的文字颜色 (color) 没有被设置为透明或与背景色相同。例如：
```
.el-button {
    color: #000; /* 确保颜色可见 */
}
```
检查样式优先级：

如果你在注入的样式中使用了通用选择器（如 *），这些样式可能会对所有元素产生影响，包括 el-button。
尝试减少样式的广度，避免影响到 el-button。
检查样式加载顺序：

确保你的自定义样式在 el-button 的样式之后加载。
可以通过调整 <link> 或 <style> 标签的位置来实现。
使用开发者工具：

在浏览器的开发者工具中，查看 el-button 元素的计算样式，检查是否有样式被意外地覆盖或冲突。
设置显式样式：

在你的自定义样式中，使用 !important 来确保样式优先级：
```
.el-button {
    color: #000 !important;
}
```
隔离样式：

尝试在一个隔离的环境中应用你的样式，确保没有其他样式干扰。如果在隔离环境中没有问题，那么问题可能是由于样式冲突。