Add CSS for Your Component

You can add a CSS that will provide a default style for your component.

To add a CSS:

1. Add a design.css file to the assets folder of your component, with the following contents:

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

2. Add to appinfo.json to declare the style class prefix that will be used to style your component. If a styleClassName of h1-component is added, when your component is dropped onto the page, the default style will be h1-component-default-style. The new contents of appinfo.json follows:

   {
      "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": [ ]
      }
   }

Verify that your component will now pick up its default data from the appinfo.json file.