为组件添加 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 文件，因此必须刷新浏览器并将组件重新添加到页以获取更改。