[CSS Styling Issues](https://sapui5.hana.ondemand.com/1.36.6/docs/guide/9d87f925dfbb4e99b9e2963693aa00ef.html)

本節列出了 SAPUI5 中與 CSS 樣式相關的一些最重要的規則。

SAPUI5 控制元件使用 CSS 進行樣式設定，並且由於應用程式可以提供自己的 CSS，因此它們可以調整樣式。 然而，這種適應越深，它們就越有可能與未來的 SAPUI5 更新或其他庫和應用程式相關聯。但如果我們遵循下面列出的規則，可以降低發生這種情況的風險。

# Don't override control class styling directly

SAPUI5 不保證跨版本樣式類名的穩定性。 如果樣式類的命名在以後的版本中發生變化，樣式規則將不再應用於目標元素。 此外，當應用程式在共享執行時環境（如 SAP Fiori Launchpad）中執行時，直接覆蓋控制元件類樣式可能會導致樣式衝突。

最佳實踐就是，新增您自己的名稱空間類。

不好的做法：直接修改 SAP 標準的 CSS class：

```html
.sapMInputBaseError {
	font-weight: bold;
}
```

正確做法：

```javascript
oButton.addStyleClass("poaAppError");
```

```css
.poaAppError {
	font-weight: bold;
}
```

# Don't style DOM element names directly

直接樣式化 DOM 元素會導致不可預知的結果，因為 SAPUI5 不保證內部控制 DOM 樹隨時間的穩定性。 此外，當應用程式在共享執行時環境（如 SAP Fiori Launchpad）中執行或新增自定義 HTML 時，這可能會導致樣式衝突。 最好將樣式更改限制為專門使用的 CSS 類。

不好的例子：

```css
div {
	width: 120px;
}
```

正確做法：

```css
.myStyleClass {
	width: 120px;
}
```

# Don't use generated IDs in CSS selectors

SAPUI5 應用程式可以為元素建立動態 ID。 不要將這些 ID 用作自定義 CSS 中的選擇器，因為它們會隨著時間而改變。 最好新增和使用 CSS 類。

錯誤做法：

```css
#__view1__button0 {
	font-weight: bold;
}
```

正確做法：

```css
.myEmphasizedButton {
	font-weight: bold;
}
```

# Don't create selectors that are not namespaced

未名稱空間的自定義選擇器和 CSS 類可能會導致共享執行時環境（如 SAP Fiori Launchpad）中的樣式衝突，或者包含可能使用相同 CSS 類名稱的其他 JavaScript 庫時。

錯誤做法：

```css
.title {
	font-weight: bold;
}
```

正確做法：

```css
.poaAppTitle {
	font-weight: bold;
}
```

# Don't use hard-coded colors, font sizes and images if the app should be themable

應用程式的主題性依賴於 SAPUI5 主題 CSS 中的 LESS 計算。 應用程式和自定義控制元件中的硬編碼顏色、字型和影像意味著這些顏色不會被主題修改，這會導致設計問題或可訪問性問題（例如，在高對比度黑色 (HCB) 主題中）。 您可以使用由這些 LESS 計算提供的特殊 CSS 類。

錯誤做法：

```css
.myCustomHTML {
	color: #FFF;
	background-color: blue;
}
```

正確做法：

將 CSS 類 sapThemeTextInverted 和 sapThemeHighlight-asBackgroundColor 新增到您的自定義 HTML 元素。

SAP UI5 使用 CSS 的一些注意事項

相關文章