👍

Defining CSS rules

With Appery.io, you can quickly add the needed styles to any components under the PROPERTIES > Styles tab. All you need to do is add the needed CSS rule to the corresponding field:

However, in some cases, users can experience issues with prioritizing CSS styles for some UI components they add to their apps.
The following solutions (or their combinations) can be applied for prioritizing Styles properties over the Class properties for most UI components.

🚧

Note, that customizing styles can work differently for different components because of many factors.
For example, for all the current UI components (with the exception of Input, Card, Textarea, and Toolbar title) the Text Color custom properties have the highest priority.
At the same time, Input, Card, Textarea, and Toolbar title will prioritize the color defined for the Class property of the corresponding component under its PROPERTIES > Styles tab.

👍

We highly recommend using our Appery.io Tester app for quick testing the app UI on the device.

Applying !important in CSS Styles

1. First of all, open the page SCSS panel and enter the needed code using !important, for example:

.background-color-yellow {
    background-color: yellow !important;
    
}

2. Then, switch to the DESIGN panel and apply it to the needed component(s) (here, it is a Toolbar title):

This method can be applied to most UI components.

Applying Additional Selectors for Prioritizing

Here is an example of how using the .div-html selector can change the appearance of the Card component.

1. Enter the next code for the page SCSS panel:

2. Go to the page DESIGN panel and under PROPERTIES, set the Class property of the Card to div-html:

3. For the Card Item Title component, set its Class to background-color-black. To experiment, you can also change its Card Title Color properties as shown below:

4. If you proceed with modifying the Class property of the Card Item component as background-color-black, you will get this:

Applying CSS Custom Properties and Shadow Part

Below you will find popular CSS custom properties (and Shadow Part) used for styling different UI components.

Button Component

In this example, the following ion-button CSS custom properties are used for styling the Button components:

1. Go to the page DESIGN panel and add two Button components to the page.
2. Now, open the page SCSS panel and add the following code:

ion-button {
    --background: black;
    --color: orange;
}

3. Click the TEST button on the App Builder Toolbar to go to the page preview. As you can see, both buttons are identical:

4. Now, let's modify the page SCSS panel by adding the following to the existing code:

ion-button.native::part(native) {
    background: yellow;
    color: orange;
}

Now, the code should look like this:

5. Go back to the page DESIGN panel and under its PROPERTIES > Styles tab, set the Button2 component's Class property to native:

6. Indicating the custom native class for this particular Button component will prioritize it over the common style applied to the other buttons.
   Let's click the TEST button on the App Builder Toolbar once again to see the updated page preview:

📘

Want to Know More?

Check here for more information about the ion-button CSS custom properties.

Card Component

In this example, the followingion-card CSS custom properties are used for styling the Card component:

1. Open the page SCSS panel and add the following code:

ion-card::part(native) {
    background: yellow;
    color: blue;
}

2. To be able to apply native, go to the page )DESIGN panel and under its PROPERTIES Common tab, set the component's Button property to True:

3. Click the TEST button on the App Builder Toolbar to go to the page preview:

📘

Want to Know More?

Check here for more information about the ion-card CSS custom properties.

Checkbox Component

In this example, the following ion-checkbox CSS custom properties are used for styling the Checkbox component:

1. Open the page SCSS panel and add the following code:

ion-item::part(native) {
    background: yellow;
    color: black;
    }

ion-checkbox::part(container) {
    background: yellow;
    border-radius: 25%;
      }
      
ion-checkbox::part(mark) {
    background: red;
    stroke: red;
      }

ion-label.blue-color {
    --background: red;
    --color: blue;
      }

2. To specify the label class indicated in the code above, go to the page DESIGN panel, add the Checkbox component to the page, and under its PROPERTIES > Styles tab, set the component's Item Label > Class property to blue-color:

3. Click the TEST button on the App Builder Toolbar to go to the page preview:

📘

Want to Know More?

Check here for more information about the ion-checkbox CSS custom properties.

Datetime Component

In this example, the following ion-datetime CSS custom properties are used for styling the Datetime component:

1. Open the page SCSS panel and add the following code:

ion-item::part(native) {
    background: yellow;
    }

ion-datetime::part(placeholder) {
    background: orange;
    color: black;
      }
      
ion-datetime::part(text) {
    color: black;
      }

ion-label.blue-color {
        --color: blue;
      }
      
ion-datetime {
         --padding-bottom: 50px;
         --padding-top:50px;
  }

2. To specify the label class indicated in the code above, go to the page DESIGN panel, add the Datetime component to the page, and under its PROPERTIES > Styles tab, set the component's Item Label > Class property to blue-color:

3. Click the TEST button on the App Builder Toolbar to go to the page preview:

📘

Want to Know More?

Check here for more information about the ion-datetime CSS custom properties.

Grid Component

In this example, the --ion-grid-padding CSS custom property is used for styling the Grid component:

1. First, drag the Grid and to the Content area. A grid with one default Grid Row with two child Grid Cell components will be created.
2. Now, drag per one Text component to each grid cell and rename them:

3. Open the page SCSS panel and add the following code:

ion-grid {
          --ion-grid-padding: 50px;
  }

The CSS padding settings should be instantly applied:

4. Click the TEST button on the App Builder Toolbar to go to the page preview:

📘

Want to Know More?

Check here for more information about the ion-grid CSS custom properties.

Image Component

In this example, the following ion-img CSS custom properties are used for styling the Image component:

• For Avatar:

• For Thumbnail:

1. First, drag the Image component to the Content area.
2. Under its PROPERTIES > Common tab, click the Change button to upload the needed image (should be prepared beforehand).
3. Then, set the component's Wrapper property to Avatar:

4. Now, open the page SCSS panel and add the following code:

ion-img::part(image) {
        width: 500px;
        height: 500px;
        margin: 10px;
  }

ion-avatar {
        border-radius: 100px;
        background-color: orange;
        width: 500px;
        height: 500px;
  }

5. Click the TEST button on the App Builder Toolbar to go to the page preview:

📘

Want to Know More?

Check here for more information about the ion-img CSS custom properties.

Input Component

In this example, the following ion-input CSS custom properties are used for styling the Input component.

1. Open the page SCSS panel and add the following code:

ion-input {
    --background: orange;
    --color: black;
}

The resulting component's UI is as follows:

2. Now, for experimenting, let's add the following to the existing code:

ion-item::part(native) {
    background: yellow;
    }
    
ion-label.rebeccapurple-color {
    --color: rebeccapurple;
      }

3. Also, to specify the label class indicated in the code above, go to the page DESIGN panel and under its PROPERTIES > Styles tab, set the component's Label > Class property to rebeccapurple-color:

4. Click the TEST button on the App Builder Toolbar to go to the updated page preview:

📘

Want to Know More?

Check here for more information about the ion-input CSS custom properties.

Radiobutton Component

In this example, the following ion-range CSS custom properties are used for styling the Radiobutton component:

1. First, drag the Radiogroup component to the Content area.
2. Then, open the page SCSS panel and add the following code:

ion-radio::part(container) {
    background: orange;
      }
ion-radio::part(mark) {  
    width: 10px;
    height: 5px; }
    
ion-radio {
    --border-radius: 130px 50px;
    --color: green;
    --color-checked: red;
  }

Here is what the page UI looks like when testing on preview:

3. If you are additionally interested in different styles for the different Radiobutton labels, open the SCSS panel again and add the following code:

ion-label.blue-color {
    --background: red;
    --color: blue;
      }
      
ion-label.red-color {
    --background: red;
    --color: red;
      }
      
ion-label.green-color {
    --background: red;
    --color: green;
      }

4. Now, under the PROPERTIES > Styles tab, one by one, select the needed buttons, and set their Label > Class properties to their corresponding classes:

5. Click the TEST button on the App Builder Toolbar to go to the updated page preview. The UI will change to:

6. Finally, if you also need to add background to your radios, you can add native to the existing code under the page SCSS panel:

ion-item::part(native) {
    background: yellow;
    }

With the above code added, the page should look like this:

7. Once again, click the TEST button on the App Builder Toolbar to go to the updated page preview. The final page UI is like this:

📘

Want to Know More?

Check here for more information about the ion-radio CSS custom properties.

Range Component

In this example, the following ion-range CSS custom properties are used for styling the Range component:

1. Open the page SCSS panel and add the following code:

ion-range::part(bar) {
        background: black;
      }

ion-range::part(bar-active) { 
        background: orange;
      }

ion-range {
         --height: 300px;
  }

2. Add the Range component to the page and click the TEST button on the App Builder Toolbar to open the page preview:

📘

Want to Know More?

Check here for more information about the ion-range CSS custom properties.

Reorder Component

In this example, the followingion-reorder CSS custom properties are used for styling the Reorder component:

1. First, drop the Reordergroup component to the Content area. A group of three default Reorder components will be created.
2. Open the page SCSS panel and add the following sample code:

ion-reorder::part(icon) {
          width: 100px;
          height: 80px;
      }

3. Click the TEST button on the App Builder Toolbar to open the page preview:

4. If you need to add some background to your items, you can add native to the existing code under the page SCSS panel:

ion-item::part(native) {
    background: green;
    }

5. Click TEST once again to see the updated preview:

📘

Want to Know More?

Check here for more information about the ion-reorder CSS custom properties.

Search Component

In this example, the followingion-searchbar CSS custom properties are used for styling the Search component:

1. Open the page SCSS panel and add the following code:

ion-searchbar {
      --background: black;
      --color: white
  }

2. Add the Search component and click the TEST button on the App Builder Toolbar to open the page preview:

📘

Want to Know More?

Check here for more information about the ion-searchbar CSS custom properties.

Select Component

In this example, the followingion-select CSS custom properties are used for styling the Select component:

1. Open the page SCSS panel and add the following code:

ion-select::part(icon) {
    background: black;
    color: orange;
      }

ion-select::part(placeholder) {
    color: green;
      }
      
ion-select::part(text) {
    background: red;
    color: yellow;
      }

ion-select {
         --padding-bottom: 50px;
         --padding-top:50px;
  }

2. Add the Select component and click the TEST button on the App Builder Toolbar to open the page preview:

📘

Want to Know More?

Check here for more information about the ion-select CSS custom properties.

Spinner Component

In this example, the followingion-spinner CSS custom properties are used for styling the Spinner component:

1. Open the page SCSS panel and add the following code:

ion-spinner {
    color: orange;
      }

2. Add the Spinner component to the page and click the TEST button on the App Builder Toolbar to open the page preview:

📘

Want to Know More?

Check here for more information about the ion-spinner CSS custom properties.

Textarea Component

In this example, the followingion-textarea CSS custom properties are used for styling the Textarea component:

1. Open the page SCSS panel and add the following code:

ion-textarea {
    background: yellow;
    color: black;
}

2. Add the Textarea component to the page and click the TEST button on the App Builder Toolbar to open the page preview:

3. Now, for experimenting with the element's label and background, let's add the following to the existing code:

ion-item::part(native) {
    background: yellow;
    }
    
ion-label.rebeccapurple-color {
    --color: rebeccapurple;
      }

4 Also, to specify the label class indicated in the code above, go to the page DESIGN panel and under its PROPERTIES > Styles tab, set the component's Label > Class property to rebeccapurple-color:

5. Click the TEST button on the App Builder Toolbar to go to the updated page preview:

📘

Want to Know More?

Check here for more information about the ion-textarea CSS custom properties.

Toggle Component

In this example, the followingion-toggle CSS custom properties are used for styling the Toggle component:

1. Open the page SCSS panel and add the following code:

ion-toggle::part(handle) {
    background: black;
    color: orange;
}

ion-toggle::part(track) {
    background: red;
}

ion-label.rebeccapurple-color {
    --color: rebeccapurple;
      }

2. To specify the label class indicated in the code above, go to the page DESIGN panel and under its PROPERTIES > Styles tab, set the component's Label > Class property to rebeccapurple-color:

3. Click the TEST button on the App Builder Toolbar to open the page preview:

📘

Want to Know More?

Check here for more information about the ion-toggle CSS custom properties.

Toolbar Component

In this example, the followingion-toolbar CSS custom properties are used for styling the Toolbar component:

1. Open the page SCSS panel and add the following code:

ion-toolbar {
    --background: orange;
    --color: blue;
}

2. If you additionally need to differentiate the Toolbar title from the Toolbar, go back to the SCSS panel and paste the following code below the existing lines:

.background-color-yellow {
    background-color: yellow !important;
    
}

3. Additionally, you will need to open the Toolbar title PROPERTIES > Styles tab and specify its Class as background-color-yellow:

4. Click the TEST button on the App Builder Toolbar to open the page preview. The resulting toolbar UI will look like this:

📘

Want to Know More?

Check here for more information about the ion-toolbar CSS custom properties.

Applying Combinations of Above Solutions

You can try different combinations of the solutions described above, for example, use custom CSS together with additional selectors and/or !important for achieving the needed UI components' view.