项目场景：

相关背景：

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 组件内的文字变为空白，通常是由于样式冲突或样式覆盖的问题。

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

1. 检查样式优先级：

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

2. 检查字体颜色：

   确保 el-button 组件的文字颜色 (color) 没有被设置为透明或与背景色相同。例如：

   .el-button {
       color: #000; /* 确保颜色可见 */
   }
   

3. 检查样式优先级：

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

4. 检查样式加载顺序：

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

5. 使用开发者工具：

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

6. 设置显式样式：

   在你的自定义样式中，使用 !important 来确保样式优先级：

   .el-button {
       color: #000 !important;
   }
   

7. 隔离样式：

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

---

解决方案：

解决方案：

通过考虑到的可能性一一进行排除，

最后发现我自己的代码中并没有写这样的样式，经过查询资料了解到，

发现这个injected stylesheet字面意思就是注入样式，一般来说注入样式是由浏览器插件（扩展程序）导致的。所以我们把它禁用或删除，按钮就可以正常显示了。