如何在Storyboard中修改按钮的背景颜色？

以下是几种最高频的问题原因和对应修复方式，可按顺序排查：

• 样式优先级被覆盖
  打开浏览器开发者工具的元素样式面板，查看你设置的background-color属性是否被划横线标记。如果是说明有更高优先级的样式覆盖了你的配置，可以先加!important临时验证：

  .target-button {
    background-color: #你的自定义主题色 !important;
  }
  

  验证生效后建议通过提升选择器权重的方式替代!important，避免全局样式污染。
• 原生控件默认样式未清除
  如果这个按钮是<input type="file">这类特殊原生控件、或是UI框架的内置封装按钮，会默认携带系统/框架预设的外观样式，需要先清除默认外观再配置自定义样式：

  .target-button {
    -webkit-appearance: none;
    appearance: none;
    /* 之后再写背景色等自定义样式 */
  }
  

• 其他属性遮挡背景
  检查按钮是否设置了background-image、渐变背景、不透明的box-shadow或border，这类属性会遮挡纯色背景，可以先临时注释相关属性验证背景色是否能正常显示。
• 主题色变量注入异常
  如果你是通过CSS变量调用主题色，可先直接写死色值测试，如果写死色值生效，说明当前节点上下文无法读取到主题色变量，把变量定义移至:root全局作用域即可解决。

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