SAPUI5 sap.m.Input组件自定义CSS设置font-size不生效问题咨询

问题原因 #

sap.m.Input 渲染后的DOM结构是多层嵌套的，你通过class属性或者addStyleClass添加的自定义样式类只会挂载在Input的外层容器节点上：

• 背景色可以直接作用在外层容器上，所以能正常生效
• 实际承载文本内容的是内层带.sapMInputBaseInner类名的原生<input>子元素，SAP UI5默认给这个内层元素设置了优先级更高的font-size样式，你给外层容器设置的font-size不会继承到内层，也无法覆盖内层的默认样式，因此不生效。

解决方法 #

调整自定义CSS的选择器，直接命中内层的输入元素即可，修改后的CSS如下：

.inputFocused .sapMInputBaseInner{
  background-color: #ABEBC6 !important;
  font-size: 3.5rem !important; 
}
.inputNotFocused .sapMInputBaseInner{
    background-color: #F4F4F4 !important;
    font-size: 35px !important;
 }

补充说明 #

• 原有视图的XML配置、运行时动态切换样式类的代码都不需要修改，直接替换CSS即可生效
• 如果需要适配只读、禁用等特殊状态的Input，可以在选择器后追加对应的状态类，比如只读状态用.inputFocused .sapMInputBaseReadonlyInner

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