步骤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其中将包含我们的CSS文件。在新的样式定义文件中的CSS在文件夹中，我们创建了与自定义名称空间类结合的自定义类。这样可以确保样式仅应用于应用程序中使用的控件。

按钮的默认边距为 0 我们要覆盖的内容：我们添加了一个自定义边距 2px（要么 0.125rem 相对于默认字体大小计算 16px）到带有样式类的按钮 myCustomButton。我们添加CSS类sapMBtn 使选择器更具体：在CSS中，包含最具体选择器的规则“获胜”。

对于从右到左（rtl），您可以设置左页边距，并在应用程序显示反转时重置右页边距。如果仅使用标准SAPUI5控件，则无需担心，在这种情况下，如果我们使用自定义CSS，则必须添加此信息。

在另一个 myCustomText 我们定义一个粗体文本并将显示设置为 inline-block。这次，我们只定义了自定义类，没有任何其他选择器。我们此处尚未设置颜色值，我们将在视图中进行设置。

webapp / manifest.json

在里面 resources 的部分 sap.ui5命名空间，可以加载该应用程序的其他资源。我们通过定义相对于组件的URI来加载CSS样式。然后，SAPUI5将该文件添加为HTML页面的标题，作为<link>标记，就像在普通网页中一样，浏览器会自动加载它。

webapp/view/App.view.xml

应用程序控件中使用我们的自定义名称空间类： myAppDemoWT。此类没有设置样式规则，并且在CSS规则的定义中用于定义仅对此应用程序有效的CSS选择器。

我们将自定义CSS类添加到按钮，以精确定义按钮和输入字段之间的空间。现在，我们为面板内容提供了像素完美的设计。

为了突出显示输出文本，我们使用 FormattedText控件，可以使用自定义CSS或HTML代码分别设置样式。我们添加自定义CSS类（myCustomText）并添加与主题相关的CSS类，以设置主题中定义的突出显示颜色。

现在，实际颜色取决于所选主题，这可以确保颜色始终适合主题并且在语义上清晰。有关可用CSS类名称的完整列表，请参见主题参数的CSS类。

4.约定

• 不要在自定义CSS中指定颜色，而应使用标准的主题相关类。