SAPUI5 Walkthrough教程（十四）——自定义 CSS 和主题颜色

有时我们需要定义一些更细粒度的布局，这时我们可以利用 CSS 的灵活性将自定义样式类添加到控件并根据需要设置它们的样式。

创建webapp/css/style.css

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 文件夹内的新样式定义文件中，创建了与自定义命名空间类相结合的自定义类。这可确保样式仅应用于应用中使用的控件。
按钮的默认边距为 0，我们想要覆盖：将 2px 的自定义边距（或相对于默认字体大小 16px 计算的 0.125rem）添加到样式类为 myCustomButton 的按钮。我们添加了 CSS 类 sapMBtn 以使选择器更具体：在 CSS 中，具有最具体选择器的规则“wins”。
对于从右到左 （rtl） 语言（如阿拉伯语），您可以在应用显示反转时设置左边距并重置右边距。如果您只使用标准 SAPUI5 控件，则无需关心此内容，在这种情况下，我们使用自定义 CSS，您必须添加此信息。
在类 myCustomText 中，定义了一个粗体文本并将显示设置为内联块。这只定义自定义类，没有任何额外的选择器。目前还没有在这里设置颜色值，将在视图中执行此操作。

webapp/manifest.jsonu

{
  "_version": "1.12.0",
  "sap.app": {
	"id": "sap.ui.demo.walkthrough",
	"type": "application",
	"i18n": "i18n/i18n.properties",
	"title": "{{appTitle}}",
	"description": "{{appDescription}}",
	"applicationVersion": {
	  "version": "1.0.0"
	}
  },
  "sap.ui": {
	"technology": "UI5",
	"deviceTypes": {
		"desktop": true,
		"tablet": true,
		"phone": true
	}
  },
  "sap.ui5": {
	"rootView": {
		"viewName": "sap.ui.demo.walkthrough.view.App",
		"type": "XML",
		"id": "app"
	},
	"dependencies": {
	  "minUI5Version": "1.93",
	  "libs": {
		"sap.ui.core": {},
		"sap.m": {}
	  }
	},
	"models": {
	  "i18n": {
		"type": "sap.ui.model.resource.ResourceModel",
		"settings": {
		  "bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
		  "supportedLocales": [""],
		  "fallbackLocale": ""
		}
	  }
	},
	"resources": {
	  "css": [
		{
		  "uri": "css/style.css"
		}
	  ]
	}
  }
}

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">
	<Shell>
		<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>
	</Shell>
</mvc:View>

app控件是使用我们的自定义命名空间类 myAppDemoWT 配置的。此类未设置样式规则，在 CSS 规则的定义中用于定义仅对此应用有效的 CSS 选择器。

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

为了突出显示输出文本，使用 FormattedText 控件，该控件可以通过自定义 CSS 或 HTML 代码单独设置样式。通过添加自定义 CSS 类 （myCustomText） 并添加一个依赖于主题的 CSS 类来设置主题中定义的突出显示颜色。

实际颜色现在取决于所选的主题，这可确保颜色始终适合主题并且在语义上清晰。
结果：可以看到，按钮和输入字段之间的间距现在更小，输出文本以粗体显示