更新主题以便其他人选取 H1 组件样式

您可以在主题中为组件注册样式，以便其他人可以从“设置”面板或样式选项卡在您为组件提供的样式之间切换。

1. 向组件 design.css 文件再添加一些样式。在每个样式前面添加组件的已注册 styleClassName（在 appinfo.json 中定义）作为前缀。对于此组件，前缀为 h1-component。

   已添加了另外两个样式：h1-component-gothic-style 和 h1-component-courier-style。

   design.css 的新内容现在如下所示：

   .h1-component-default-style .scs-component-content {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    color:red;
    font-weight: normal; }
   .h1-component-gothic-style .scs-component-content {
    font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif;
    font-size: 32px;
    font-weight: bold; }
   .h1-component-courier-style .scs-component-content {
    font-family: "Courier";
    font-size: 32px;
    font-weight: bold; }

2. 在主题的 design.json 文件中注册样式。可以在站点当前使用的主题中查找此文件。下钻到 designs 文件夹中的主题文件，再下钻到 defaults 文件夹，然后向 design.json 添加有关组件的部分。

   下文的粗体文本是要添加的内容示例：

              "news-article": {
                       "styles": [{
                                         "name": "News Article 1",
                                         "class": "news-article-default-style"
                                         },
                       {
                                         "name": "News Article 2",
                                         "class": "news-article-style-1"
                                         }
                                  ]
              }, 
              "h1-component": { 
       "styles": [{ 
         "name": "Plain", 
         "class": "h1-component-default-style" 
      }, { 
               "name": "Courier", 
               "class": "h1-component-courier-style" 
      }, { "name": "Gothic", 
           "class": "h1-component-gothic-style" 
      }] 
     }
     },
     "componentIcons": {
             "scs-socialbar": {
                       "icons": [