SAP UI5技术求助：修改控制器动态添加的Input控件颜色

下面提供几种实用的解决方案，直接适配你的代码场景：

方法1：直接设置内联样式 #

适合简单的固定颜色需求，直接在Input构造函数中通过style属性指定CSS样式：

// 动态创建Input并设置颜色
var cell = new sap.m.Input({
  value: i.toString() + "%",
  // 示例：设置红色字体+浅灰色背景
  style: "color: #ff0000; background-color: #f5f5f5;"
});

方法2：使用自定义CSS类（推荐） #

如果需要复用样式或保持代码整洁，建议定义自定义CSS类后添加到Input上：

1. 在应用的CSS文件（如webapp/css/style.css）中添加样式：

/* 自定义Input高亮样式 */
.custom-input-highlight {
  color: #d32f2f !important; /* 匹配SAP主题的警告红色 */
  background-color: #ffebee !important;
  border-color: #ef9a9a !important;
}

2. 在控制器中为Input添加该类：

var cell = new sap.m.Input({
  value: i.toString() + "%",
});
// 添加自定义样式类
cell.addStyleClass("custom-input-highlight");

注：!important用于覆盖SAP UI5默认控件样式的优先级，确保自定义样式生效。

方法3：根据值动态切换颜色 #

如果需要根据Input的数值动态调整颜色（比如百分比超过阈值时变色），可以通过事件或初始化判断实现：

var cell = new sap.m.Input({
  value: i.toString() + "%",
  // 值变化时触发样式切换
  change: function(oEvent) {
    var inputControl = oEvent.getSource();
    // 提取纯数值（去掉%符号）
    var currentValue = parseFloat(inputControl.getValue().replace("%", ""));
    // 根据阈值切换样式
    if (currentValue > 50) {
      inputControl.addStyleClass("custom-input-highlight");
    } else {
      inputControl.removeStyleClass("custom-input-highlight");
    }
  }
});

// 初始化时同步样式
var initialValue = parseFloat(i.toString());
if (initialValue > 50) {
  cell.addStyleClass("custom-input-highlight");
}

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