sap更改主题_步骤14：自定义CSS和主题颜色

前面步骤中，我们设置了控件的Class属性，使用的是SAPUI5预定义的CSS 属性，但有时我们需要自定义一些更细致的布局，这样我们可以通过向控件中添加自定义样式CSS类并根据需要对它们进行样式设置，来更灵活的使用CSS。

1.练习效果

从图中可看出，按钮和输入字段之间的空间较小，输出文本为粗体

2.警告

兼容性规则中描述，SAPUI5生成的HTML和CSS 不是公共API的一部分，SAPUI5可能会在补丁程序和升级的版本中进行更改。如果新版本决定覆盖了样式，SAPUI5更新时都会有义务测试和更新这些修改。但前提条件是您可以控制所使用的SAPUI5版本，例如在独立方案中。在SAP Fiori启动板中运行您的应用程序时，这是不可能的，在其中为所有应用程序集中加载了SAPUI5。因此， SAP Fiori启动板应用程序不应覆盖样式。所以你在使用自定义的样式时，在升级SAPUI5时，得自己考虑升级变更。

3.源码

您可以在演练-步骤14中查看和下载所有文件。

webapp/css/style.css(新)

CSS

html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {

margin-right: 0.125rem

}

html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {

margin-left: 0.125rem

}

.myAppDemoWT .myCustom