SAPUI5 - 输入字段 - 字体大小 - CSS：更改字体大小不起作用

Question

我有一个 sap.m.Input 类型的字段。 众所周知，我把它放在了我的视野中。 我添加了如下所示的自定义 .css 代码：

.inputFocused{

  background-color: #ABEBC6 !important;
  font-size: 3.5rem !important; 
}

.inputNotFocused{

    background-color: #F4F4F4 !important;
    font-size: 35px !important;
 }

不管我是否将其中一种样式作为标签属性通过

<Input class="inputNotFocused" id="privateId" type="Number" editable="false" maxLength="13" placeholder="{i18n>privateId}" width="150px"/>

或者如果我在任何给定时刻在运行时这样做，比如

this.rInputWithFocus.addStyleClass("inputFocused");

我确实看到了背景颜色的变化。

但字体从未改变过。

同样的方法也适用，例如，对于简单的标签，没有任何问题。

但显然不是用于 sap.m.Input。

我错过了什么？

Answer 1

UI5 控件Input 将呈现为包含实际输入的 div。

生成的 HTML 如下所示

<div id="__xmlview1--inputText-content" class="sapMInputBaseContentWrapper" style="width: 100%;">
    <input id="__xmlview1--inputText-inner" placeholder="Enter text" value="" aria-labelledby="__label5" type="text" autocomplete="off" class="sapMInputBaseInner">
</div>

您的自定义类 inputNotFocused 将应用于 div。

内部输入有自己的 CSS 类，它定义了不同的字体大小（但不是不同的背景颜色，这就是为什么可以通过更改 div 来更改背景颜色并且输入将继承背景颜色的原因div)。

如果您想更改内部输入，请调整您的 CSS：

.inputNotFocused input {
   font-size: 3.5rem;
}

或者使用.inputNotFocused .sapMInputBaseInner作为选择器。

不需要丑陋的!important btw。

但请记住，将您自己的 CSS 添加到 SAP 标准 CSS 中可能会在未来出现问题。