步驟 12：定義自訂樣式

您所建立的元件會如用於網站之主題的 design.json 和 design.css 檔案中的任何其他元件等同視之。

若要為自訂元件新增自己的樣式，請確認您註冊元件時使用的 id 值。在 appinfo.json 檔案中；此為 "id": "hello-world"。

使用該值編輯主題的 design.json 檔案，並新增該 id 所要支援的新樣式。例如，編輯主題中的 /designs/default/design.json 檔案，並新增以下程式碼：

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

開啟元件的「設定值」面板時，應該會在「樣式」頁籤中看到列出兩個選項：Plain (預設) 和 Gothic。不過在 design.css 檔案中實際定義列出的樣式類別之前，切換這些選項並不會有任何效果。

編輯主題的 design.css 檔案，並新增您樣式的階層式樣式表 (CSS) 類別。例如，編輯主題中的 /designs/default/design.css 檔案，並新增以下程式碼：

.hello-world-default-style .scs-component-content {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 24px;
  font-weight: normal; }

.hello-world-gothic-style .scs-component-content {
  font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; 
  font-size: 32px;
  font-weight: bold; }

儲存您的檔案並將其同步至 Oracle Content Management 執行處理伺服器。