Atualizar o Tema para que outros Selecionem o Estilo de Componente H1

Você pode registrar estilos para seu componente com o tema; assim, outros usuários poderão alternar entre os estilos que você fornece para seu componente no painel de definições ou na guia Estilo.

1. Adicione alguns outros temas ao arquivo design.css do seu componente. Prefixe cada estilo com o styleClassName registrado do componente, conforme definido em appinfo.json. Para este componente, o prefixo é h1-component.

   Dois outros estilos, h1-component-gothic-style e h1-component-courier-style foram adicionados.

   O novo conteúdo de design.css agora será este:

   .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. Registre seus estilos no arquivo design.json do tema. Você pode encontrar esse arquivo no tema que o site está usando. Faça drill-down dos arquivos do tema na pasta de designs e depois na pasta de padrões e adicione uma seção para seu componente ao arquivo design.json.

   O texto em negrito que se segue é um exemplo do que adicionar:

              "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": [