新增元件的 CSS

您可以新增 CSS，以提供預設的元件樣式。

1. 新增 design.css 檔案至元件的 assets 資料夾，其中包含以下內容：

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

2. 新增至 appinfo.json，以宣告將用來設定元件樣式的樣式類別前置碼。如果新增 h1-component 的 styleClassName，當元件放到頁面上時，預設樣式會是 h1-component-default-style。appinfo.json 的新內容如下：

   {
      "id": "h1-component-id",
   
      "settingsData": {
                "settingsHeight": 90,
                "settingsWidth": 300,
                "settingsRenderOption": "inline",
                "componentLayouts": [ ],
                "triggers": [ ],
                "actions": [ ]
      },
      "initialData": {
                "componentId": "h1-component-id",
                "styleClassName":"h1-component",
                "customSettingsData": {
                        "headingText": "Heading 1"
                },
                "nestedComponents": [ ]
      }
   }

3. 將第 2 行 (define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {) 取代為以下內容，以更新 render.js 來載入您的 CSS 檔案。

   define(['knockout', 'jquery', 'text!./render.html', 'css!./design.css'], function(ko, $, template, css) { 

   註：

   由於您已變更 appinfo.json 檔案，因此必須重新整理瀏覽器並再次將元件新增至頁面以取得變更。