SapUI5可编辑字段颜色调整问题：自定义CSS不生效如何解决

自定义CSS不生效的原因 #

• SAP UI5控件渲染后，你给控件配置的class="background"是挂载在控件生成的最外层DOM容器上，而输入框、文本区域的实际可交互区域是内部的子元素，UI5默认主题对这些内部子元素设置的背景样式优先级更高，你直接针对.background类设置的样式无法命中目标元素，因此不生效。
• 如果你的样式规则没有针对内部子元素编写，或者优先级低于UI5默认样式，也会出现不生效的情况。
• 另外你代码中的描述字段TextArea设置了enabled="false"，禁用状态的控件UI5默认会额外添加专属样式，没有对应适配禁用状态的选择器也会导致样式不生效。

可行的调整方案 #

直接编写针对UI5输入类控件内部元素的CSS规则即可，参考样式如下：

/* 适配普通输入框、下拉选择框的可编辑区域 */
.background .sapMInputBaseInner {
    background-color: #e0e0e0; /* 可替换为你需要的更深的色值 */
    color: #212121; /* 如需加深文字颜色可保留该行 */
}

/* 适配文本区域的可编辑区域 */
.background .sapMTextAreaInner {
    background-color: #e0e0e0;
    color: #212121;
}

/* 适配禁用状态的输入类控件 */
.background .sapMInputBaseInner.sapMInputBaseDisabled,
.background .sapMTextAreaInner.sapMTextAreaDisabled {
    background-color: #d0d0d0;
    color: #333333;
    opacity: 1; /* 可去掉禁用状态默认的半透明效果 */
}

如果不想使用!important提升优先级，可以在选择器前加上外层表单的id进一步提高优先级，示例：

#otDetailForm .background .sapMInputBaseInner {
    background-color: #e0e0e0;
}

注意：修改前可以通过浏览器开发者工具的元素检查功能，查看目标输入框对应的实际DOM结构和生效样式，确认选择器是否匹配。

内容的提问来源于stack exchange，提问作者Céline CLAVEL