Actualización del tema para que otros usuarios seleccionen el estilo del componente H1

Puede registrar estilos para el componente con el tema, de modo que otros usuarios puedan cambiar entre los estilos que proporcione para el componente desde el panel de configuración o el separador Estilo.

1. Agregue algunos estilos más en el archivo design.css del componente. Utilice el styleClassName registrado del componente definido en appinfo.json como prefijo de cada estilo. Para este componente, este prefijo es h1-component.

   Se han agregado dos estilos adicionales, h1-component-gothic-style y h1-component-courier-style.

   Los nuevos contenidos de design.css son ahora los siguientes:

   .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 los estilos en el archivo design.json del tema. Puede encontrar este archivo en el tema que está utilizando el sitio. Aumente el detalle hasta los archivos de tema en la carpeta de diseños y, a continuación, hasta la carpeta de valores por defecto, y agregue una sección para el componente en design.json.

   El texto en negrita que se muestra a continuación es un ejemplo de lo que se debe agregar:

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