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

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:
  1. Go to the page DESIGN panel and under PROPERTIES, set the Class property of the Card to div-html:
  1. To experiment, you can select the Card Item Title component and change its Class and Card Title Color properties to as shown below:
  1. 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:

Name (Shadow Part)

Description

Example

native

The native HTML button or anchor element that wraps all child elements.

ion-button::part(native) { ….css_styles }

Name

Description

Example

--background

Button background

ion-button { --background: red; }

--color

Text color of the button

ion-button { --color: red; }

--opacity

Button opacity

ion-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;
}
  1. Click the TEST button on the App Builder Toolbar to go to the page preview. As you can see, both buttons are identical:
  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:

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

📘

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)

Description

Example

native

The native HTML button, anchor, or div element that wraps all child elements.

ion-card::part(native) { ….css_styles }

Name

Description

Example

--background

Card background

ion-card { --background: red; }

--color

Card color

`
ion-card {
--color: red;
}

`

  1. Open the page SCSS panel and add the following code:
ion-card::part(native) {
    background: yellow;
    color: blue;
}
  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:
  1. 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:

Name (Shadow Part)

Description

Example

container

The container for the checkbox mark.

ion-checkbox::part(container) { ….css_styles }

mark

The checkmark used to indicate the checked state.

ion-checkbox::part(mark) { ….css_styles }

Name

Description

Example

--background

Checkbox background

ion-checkbox { --background: red; }

--color

Checkbox color

ion-checkbox { --color: red; }

--checkmark-color

Color of the checkbox checkmark when checked

ion-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;
      }
  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:
  1. 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:

Name (Shadow Part)

Description

Example

placeholder

The placeholder of the datetime.

ion-datetime::part(placeholder) { ….css_styles }

text

The value of the datetime.

ion-datetime::part(text) { ….css_styles }

Name

Description

Example

--padding-bottom

Bottom padding of the datetime

ion-datetime { --padding-bottom: 20px; }

--padding-top

The 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;
  }
  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:
  1. 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:

Name

Description

Example

--ion-grid-padding

Padding 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:
  1. Open the page SCSS panel and add the following code:
ion-grid {
          --ion-grid-padding: 50px;
  }

The CSS padding settings should be instantly applied:

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

Name (Shadow Part)

Description

Example

image

The inner img element.

ion-img::part(image) { ….css_styles }

  • For Avatar:

Name

Description

Example

--border-radius

Border radius of the avatar and inner image

ion-img { --background: red; }

  • For Thumbnail:

Name

Description

Example

--border-radius

Border radius of the thumbnail

ion-avatar { --border-radius: red; }

--size

Size of the thumbnail

ion-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:
  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;
  }
  1. 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.

Name

Description

Example

--background

Input background

ion-input { --background: red; }

--color

Color of the input text

ion-input { --color: red; }

  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:

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

Name (Shadow Part)

Description

Example

container

The container for the radio mark.

ion-radio::part(container) { ….css_styles }

mark

The checkmark or dot used to indicate the checked state.

ion-radio::part(mark) { ….css_styles }

Name

Description

Example

--border-radius

Border radius of the radio

ion-radio { --border-radius: red; }

--color

Color of the radio

ion-radio { --color: red; }

--color-checked

Color of the checked radio

ion-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;
  }

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

  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:
  1. Click TEST button on the App Builder Toolbar to go to the updated page preview. The UI will change to:
  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:

  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:

📘

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)

Description

Example

bar

The inactive part of the bar

ion-range::part(bar) { ….css_styles }

bar-active

The active part of the bar.

ion-range::part(bar-active) { ….css_styles }

Name

Description

Example

--bar-background

Background of the range bar

ion-range { --bar-background: red; }

--height

Height of the range

ion-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;
  }
  1. 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:

Name

Description

Example

icon

The 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;
      }
  1. Click the TEST button on the App Builder Toolbar to open the page preview:
  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;
    }
  1. 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:

Name

Description

Example

--background

Background of the searchbar input

ion-searchbar { --background: black; }

--color

Color of the searchbar text

ion-searchbar { --color: red; }

  1. Open the page SCSS panel and add the following code:
ion-searchbar {
      --background: black;
      --color: white
  }
  1. 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:

Name (Shadow Part)

Description

Example

icon

The select icon container.

ion-select::part(icon) { ….css_styles }

placeholder

The text displayed in the select when there is no value.

ion-select::part(placeholder) { ….css_styles }

text

The displayed value of the select.

ion-select::part(text) { ….css_styles }

Name

Description

Example

--padding-bottom

Bottom padding of the select

ion-select { --padding-bottom: 20px; }

--padding-top

Top padding of the select

ion-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;
  }
  1. 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:

Name

Description

Example

--color

Color of the spinner

ion-spinner { --color: red; }

  1. Open the page SCSS panel and add the following code:
ion-spinner {
    color: orange;
      }
  1. 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:

Name

Description

Example

--background

Background of the textarea

ion-textarea { --background: red; }

--color

Color of the text

ion-textarea { --color: red; }

  1. Open the page SCSS panel and add the following code:
ion-textarea {
    background: yellow;
    color: black;
}
  1. Click the TEST button on the App Builder Toolbar to open the page preview:
  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;
      }

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:

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

Name (Shadow Part)

Description

Example

handle

The toggle handle, or knob, used to change the checked state.

ion-toggle::part(handle) { ….css_styles }

track

The background track of the toggle.

i on-toggle::part(track) { ….css_styles }

Name

Description

Example

--background

Background of the toggle

ion-toggle { --background: red; }

--background-checked

Background of the toggle when checked

ion-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;
      }
  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:
  1. 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:

Name

Description

Example

--background

Background of the toolbar

ion-toolbar { --background: red; }

--color

Color of the toolbar text

ion-toolbar { --color: black; }

  1. Open the page SCSS panel and add the following code:
ion-toolbar {
    --background: orange;
    --color: blue;
}
  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;
    
}
  1. Additionally, you will need to open the Toolbar title PROPERTIES > Styles tab and specify its Class as background-color-yellow:
  1. 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.


Did this page help you?