排查代码中自动插入inline style属性的原因

我的视图生成的代码如下：

<button class="keyboard-button bg-success" type="button">t</button>

但在Firefox和Chrome的开发者工具中显示为：

<button class="keyboard-button bg-success" type="button" style="background-color: white;">t</button>

问题在于内联style属性优先级高于bg-success类，直接覆盖了我设置的样式。我在应用代码中全局搜索style=没有匹配结果，怀疑是应用配置或依赖库导致的这个问题，以下是我的package.json内容：

{  
  "name": "arthur",  
  "private": true,  
  "dependencies": {    
    "@rails/actioncable": "^6.0.0",    
    "@rails/activestorage": "^6.0.0",    
    "@rails/ujs": "^6.0.0",    
    "bootstrap": "3.4.1",    
    "jquery": "3.4.1",    
    "turbolinks": "^5.2.0",    
    "webpack": "^4.46.0",    
    "webpack-cli": "^3.3.12"  
  },  
  "version": "0.1.0",  
  "devDependencies": {    
    "@babel/plugin-proposal-private-methods": "^7.18.6",    
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",    
    "@rails/webpacker": "^5.4.4",    
    "webpack-dev-server": "^3"  
  }
}

排查方向和解决方法 #

• 追踪动态样式来源：内联样式大概率是JavaScript动态添加的，你可以用浏览器开发者工具的断点功能定位：在Elements面板找到该按钮的style属性，右键选择「Break on attribute changes」，当样式被修改时会自动触发断点，就能看到对应的调用栈找到代码位置。
• 检查第三方依赖行为：你的项目依赖了jQuery、Bootstrap和Turbolinks，可能是这些库的逻辑导致样式被修改。比如Bootstrap的某些交互组件，或者自定义的jQuery脚本中调用了.css()方法（这种情况不会出现style=字符串，但会动态添加内联样式）。
• 验证Turbolinks缓存问题：Turbolinks的页面缓存可能残留旧的样式状态，你可以临时禁用Turbolinks测试，或者在页面加载完成后重置按钮样式。
• 临时覆盖样式（应急方案）：如果暂时找不到根源，可以通过提高选择器优先级来覆盖内联样式，比如使用!important（不推荐长期使用，建议找到根源后移除）：

.keyboard-button.bg-success {
  background-color: #5cb85c !important;
}

• 检查Rails视图助手：确认是否使用了Rails自带的视图助手生成按钮，某些助手可能会自动注入样式属性。

内容的提问来源于stack exchange，提问作者Eric