有时我们需要定义一些更细粒度的布局，这时我们可以通过向控件添加自定义样式类来使用CSS的灵活性，并根据自己的喜好对它们进行样式化。
Preview
The space between the button and the input field is now smaller and the output text is bold
谨慎：正如兼容性规则所述，SAPUI5生成的HTML和CSS不是公共API的一部分，可能会在补丁和小版本中更改。如果决定重写样式，则有义务在每次更新SAPUI5时测试和更新修改。这样做的一个先决条件是，您可以控制正在使用的SAPUI5版本，例如，在一个独立的场景中。当您在SAP Fiori launchpad中运行您的应用程序时，这是不可能的，因为SAPUI5是为所有应用程序集中加载的。因此，SAP Fiori launchpad应用程序不应该覆盖样式。
Coding
You can view and download all files at Walkthrough - Step 14.
webapp/css/style.css (New)
html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn { margin-right: 0.125rem } html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn { margin-left: 0.125rem } .myAppDemoWT .myCustomText { display: inline-block; font-weight: bold; }
我们创建一个文件夹css，其中将包含我们的css文件。在css文件夹内的新样式定义文件中，我们将创建与自定义名称空间类相结合的自定义类。这确保样式只应用于应用程序中使用的控件。
一个按钮有一个我们想要覆盖的默认空白为0:我们使用样式类myCustomButton向按钮添加一个2px的自定义空白(或相对于默认字体大小16px计算出的0.125rem)。我们添加了CSS类sapMBtn以使选择器更加特定:在CSS中，具有最特定选择器的规则“获胜”。
对于从右到左(rtl)语言，如阿拉伯语，在应用程序显示颠倒时设置左边框并重置右边框。如果你只使用标准的SAPUI5控件，你不需要关心这个，在我们使用自定义CSS的情况下，你必须添加这个信息。
在另一个类myCustomText中，我们定义了一个粗体文本，并将显示设置为内联块。这一次，我们只定义了自定义类，没有任何其他选择器。我们还没有在这里设置颜色值，我们将在视图中这样做。
webapp/manifest.json
... "sap.ui5": { ... "models": { ... }, "resources": { "css": [ { "uri": "css/style.css" } ] } }
在sap.ui5命名空间的参考资料部分，可以加载应用程序的其他资源。我们通过定义相对于组件的URI来加载CSS样式。然后SAPUI5将这个文件作为<link>标记添加到HTML页面的标题中，就像在普通Web页面中一样，浏览器会自动加载它。
webapp/view/App.view.xml
<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true"> <App class="myAppDemoWT"> <pages> <Page title="{i18n>homePageTitle}"> <content> <Panel headerText="{i18n>helloPanelTitle}" class="sapUiResponsiveMargin" width="auto"> <content> <Button text="{i18n>showHelloButtonText}" press="onShowHello" class="myCustomButton"/> <Input value="{/recipient/name}" valueLiveUpdate="true" width="60%"/> <FormattedText htmlText="Hello {/recipient/name}" class ="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/> </content> </Panel> </content> </Page> </pages> </App> </mvc:View>
app控件使用自定义名称空间类myAppDemoWT配置。该类没有样式化规则集，在CSS规则的定义中用于定义仅对该应用程序有效的CSS选择器。
我们将自定义CSS类添加到按钮，以精确定义按钮和输入字段之间的空间。现在我们有了一个像素完美的面板内容设计。
为了突出显示输出文本，我们使用了一个FormattedText控件，该控件可以通过使用自定义CSS或HTML代码单独设置样式。我们添加自定义CSS类(myCustomText)并添加一个与主题相关的CSS类来设置主题中定义的高亮颜色。
现在实际的颜色取决于选择的主题，确保颜色始终适合主题，语义清晰。获取可用CSS类名的完整列表，see CSS Classes for Theme Parameters.
Conventions
不要在自定义CSS中指定颜色，而是使用标准的主题相关类。
Parent topic: Walkthrough
Previous: Step 13: Margins and Paddings
Next: Step 15: Nested Views
Related Information
Descriptor for Applications, Components, and Libraries
CSS Classes for Theme Parameters
Creating Themable User Interfaces
