Applying User Styles

Using Class CSS on the Components' Styles Panel

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 the great option to quickly test the app UI on the device: our Appery.io Tester app.

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;
    
}
548548
  1. Then, switch to the DESIGN panel and apply it to the needed component(s) (here, it is a Toolbar title):
16001600

This method an be applied to most UI components.

Applying Additional Selectors for Prioritizing

Here is the 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:
493493
  1. Go to the page DESIGN panel and under PROPERTIES, set the Class property of the Card to div-html:
10341034
  1. To experiment, you can select the Card Item Title component and change its Class and Card Title Color properties to as shown below:
10331033
  1. If you proceed with modifying the Class property of the Card Item component as background-color-black, you will get this:
10351035

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:

Name (Shadow Part)DescriptionExample
nativeThe native HTML button or anchor element that wraps all child elements.ion-button::part(native) { ….css_styles }
NameDescriptionExample
--backgroundButton backgroundion-button { --background: red; }
--colorText color of the buttonion-button { --color: red; }
--opacityButton opacityion-button { --opacity: 0; }
  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;
}
458458
  1. Click the TEST button on the App Builder Toolbar to go to the page preview. As you can see, both buttons are identical:
476476
  1. 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:

519519
  1. Go back to the page DESIGN panel and under its PROPERTIES > Styles tab, set the Button2 component's Class property to native:
10321032
  1. 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:
466466

📘

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:

Name (Shadow Part)DescriptionExample
nativeThe native HTML button, anchor, or div element that wraps all child elements.ion-card::part(native) { ….css_styles }
NameDescriptionExample
--backgroundCard backgroundion-card { --background: red; }
--colorCard colorion-card { --color: red; }
  1. Open the page SCSS panel and add the following code:
ion-card::part(native) {
    background: yellow;
    color: blue;
}
463463
  1. 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:
11901190
  1. Click the TEST button on the App Builder Toolbar to go to the page preview:
469469

📘

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:

Name (Shadow Part)DescriptionExample
containerThe container for the check box mark.ion-checkbox::part(container) { ….css_styles }
markThe checkmark used to indicate the checked state.ion-checkbox::part(mark) { ….css_styles }
NameDescriptionExample
--backgroundCheckbox backgroundion-checkbox { --background: red; }
--colorCheckbox colorion-checkbox { --color: red; }
--checkmark-colorColor of the check box checkmark when checkedion-checkbox { --checkmark-color: red; }
  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;
      }
506506
  1. To specify the label class indicated in the code above, go to the page DESIGN panel and under its PROPERTIES > Common tab, set the component's Label > Class property to blue-color:
10341034
  1. Click the TEST button on the App Builder Toolbar to go to the page preview:
463463

📘

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:

Name (Shadow Part)DescriptionExample
placeholderThe placeholder of the datetime.ion-datetime::part(placeholder) { ….css_styles }
textThe value of the datetime. ion-datetime::part(text) { ….css_styles }
NameDescriptionExample
--padding-bottomBottom padding of the datetimeion-datetime { --padding-bottom: 20px; }
--padding-topThe primary background of the datetime component in RGB format.ion-datetime { --padding-top:20px; }
  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;
  }
534534
  1. To specify the label class indicated in the code above, go to the page DESIGN panel and under its PROPERTIES > Common tab, set the component's Label > Class property to blue-color:
11881188
  1. Click the TEST button on the App Builder Toolbar to go to the page preview:
466466

📘

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:

NameDescriptionExample
--ion-grid-paddingPadding for the Grid ion-grid { --ion-grid-padding: 10px; }
  1. First, drag & drop the Grid to the Content area. A grid with one default Grid Row with two child Grid Cell components will be created.
  2. Now, drag & drop per one Text to each grid cell and rename them:
10291029
  1. Open the page SCSS panel and add the following code:
ion-grid {
          --ion-grid-padding: 50px;
  }
521521

The CSS padding settings should be instantly applied:

10301030
  1. Click the TEST button on the App Builder Toolbar to go to the page preview:
465465

📘

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:

Name (Shadow Part)DescriptionExample
imageThe inner img element. ion-img::part(image) { ….css_styles }
  • For Avatar:
NameDescriptionExample
--border-radiusBorder radius of the avatar and inner image ion-img { --background: red; }
  • For Thumbnail:
NameDescriptionExample
--border-radiusBorder radius of the thumbnailion-avatar { --border-radius: red; }
--sizeSize of the thumbnailion-thumbnail { --size: red; }
  1. First, drag & drop 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:
11941194
  1. 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;
  }
514514
  1. Click the TEST button on the App Builder Toolbar to go to the page preview:
497497

📘

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.

NameDescriptionExample
--backgroundInput background ion-input { --background: red; }
--colorColor of the input textion-input { --color: red; }
  1. Open the page SCSS panel and add the following code:
ion-input {
    --background: orange;
    --color: black;
}
468468

The resulting component's UI is as follows:

467467
  1. Now, for experimenting, let's add the following to the existing code:
ion-item::part(native) {
    background: yellow;
    }
    
ion-label.rebeccapurple-color {
    --color: rebeccapurple;
      }
  1. Also, to specify the label class indicated in the code above, go to the page DESIGN panel and under its PROPERTIES > Common tab, set the component's Label > Class property to rebeccapurple-color:
10301030
  1. Click the TEST button on the App Builder Toolbar to go to the updated page preview:
471471

📘

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:

Name (Shadow Part)DescriptionExample
containerThe container for the radio mark.ion-radio::part(container) { ….css_styles }
markThe checkmark or dot used to indicate the checked state.ion-radio::part(mark) { ….css_styles }
NameDescriptionExample
--border-radiusBorder radius of the radioion-radio { --border-radius: red; }
--colorColor of the radioion-radio { --color: red; }
--color-checkedColor of the checked radioion-radio { --color-checked: red; }
  1. First, drag & drop 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;
  }
509509

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

461461
  1. 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;
      }
  1. Now, under the PROPERTIES > Common tab, one by one, select the needed buttons, and set their Label > Class properties to their corresponding classes:
10341034
  1. Click TEST button on the App Builder Toolbar to go to the updated page preview. The UI will change to:
468468
  1. 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:

522522
  1. 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:
468468

📘

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:

Name (Shadow Part)DescriptionExample
barThe inactive part of the barion-range::part(bar) { ….css_styles }
bar-activeThe active part of the bar.ion-range::part(bar-active) { ….css_styles }
NameDescriptionExample
--bar-backgroundBackground of the range barion-range { --bar-background: red; }
--heightHeight of the rangeion-range { --height: 20px; }
  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;
  }
495495
  1. Click the TEST button on the App Builder Toolbar to open the page preview:
476476

📘

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:

NameDescriptionExample
iconThe icon of the reorder handle (uses ion-icon).ion-reorder::part(icon) { ….css_styles }
  1. First, drag & 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;
      }
463463
  1. Click the TEST button on the App Builder Toolbar to open the page preview:
471471
  1. 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;
    }
485485
  1. Click TEST once again to see the updated preview:
468468

📘

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:

NameDescriptionExample
--backgroundBackground of the searchbar inpution-searchbar { --background: black; }
--colorColor of the searchbar textion-searchbar { --color: red; }
  1. Open the page SCSS panel and add the following code:
ion-searchbar {
      --background: black;
      --color: white
  }
483483
  1. Click the TEST button on the App Builder Toolbar to open the page preview:
462462

📘

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:

Name (Shadow Part)DescriptionExample
iconThe select icon container. ion-select::part(icon) { ….css_styles }
placeholderThe text displayed in the select when there is no value.ion-select::part(placeholder) { ….css_styles }
textThe displayed value of the select. ion-select::part(text) { ….css_styles }
NameDescriptionExample
--padding-bottomBottom padding of the selection-select { --padding-bottom: 20px; }
--padding-topTop padding of the selection-select { --padding-top: 20px; }
  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;
  }
517517
  1. Click the TEST button on the App Builder Toolbar to open the page preview:
463463

📘

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:

NameDescriptionExample
--colorColor of the spinner ion-spinner { --color: red; }
  1. Open the page SCSS panel and add the following code:
ion-spinner {
    color: orange;
      }
424424
  1. Click the TEST button on the App Builder Toolbar to open the page preview:
463463

📘

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:

NameDescriptionExample
--backgroundBackground of the textareaion-textarea { --background: red; }
--colorColor of the textion-textarea { --color: red; }
  1. Open the page SCSS panel and add the following code:
ion-textarea {
    background: yellow;
    color: black;
}
468468
  1. Click the TEST button on the App Builder Toolbar to open the page preview:
467467
  1. 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;
      }
511511

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

11871187
  1. Click the TEST button on the App Builder Toolbar to go to the updated page preview:
468468

📘

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:

Name (Shadow Part)DescriptionExample
handleThe toggle handle, or knob, used to change the checked state.ion-toggle::part(handle) { ….css_styles }
trackThe background track of the toggle.i on-toggle::part(track) { ….css_styles }
NameDescriptionExample
--backgroundBackground of the toggleion-toggle { --background: red; }
--background-checkedBackground of the toggle when checkedion-toggle { --background-checked: black; }
  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;
      }
507507
  1. To specify the label class indicated in the code above, go to the page DESIGN panel and under its PROPERTIES > Common tab, set the component's Label > Class property to rebeccapurple-color:
11921192
  1. Click the TEST button on the App Builder Toolbar to open the page preview:
463463

📘

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:

NameDescriptionExample
--backgroundBackground of the toolbarion-toolbar { --background: red; }
--colorColor of the toolbar textion-toolbar { --color: black; }
  1. Open the page SCSS panel and add the following code:
ion-toolbar {
    --background: orange;
    --color: blue;
}
473473
  1. 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;
    
}
561561
  1. Additionally, you will need to open the Toolbar title PROPERTIES > Styles tab and specify its Class as background-color-yellow:
11961196
  1. Click the TEST button on the App Builder Toolbar to open the page preview. The resulting toolbar UI will look like this:
467467

📘

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.