Nativescript: ActionBar style not taking effect if placed in app.css

Created on 1 Jul 2017 · 4Comments · Source: NativeScript/NativeScript

Ok, this sounds weird even to me but, it seems that styling ActionBar element from within the app.css file doesn't take effect. Styling other custom elements (StackLayout, ListView, ecc..) does work, but not ActionBar. The same CSS placed in a page component style (I'm using Angular Nativescript) does take effect.

All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 3.1.1           │ 3.1.1          │ Up to date    │
│ tns-core-modules │ 3.1.0           │ 3.1.0          │ Up to date    │
│ tns-android      │ 3.1.1           │ 3.1.1          │ Up to date    │
│ tns-ios          │                 │ 3.1.0          │ Not installed │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

question

Source

marco-gagliardi

Most helpful comment

@marco-gagliardi I have tested the described scenario and the styles are applied successfully in this test project.

However one reason for your issue might be if there are another CSS styles that are applied on your ActionBar. By default when you craete new Angular porject the template is using a set of pre-defined CSS themes delivered with nativescript-theme-core.
Also by default, the template is applying a CSS class to your automatically generated ActionBar.
e.g.

<ActionBar title="My App" class="action-bar">
</ActionBar>

So to resolve you issue and to make the global styles from your app.css to be respected you ahve two options.

First option - remove the CSS calss applied to your ActionBar

<ActionBar title="My App">
</ActionBar>

and when this is done the style applied on your element Actionbar in app.css will be respected.

ActionBar {
    background-color: red;
    color: white;
}

Second option - apply the CSS style via CSS class instaed of element and this way the CSS class applied last will take priority
e.g.

<ActionBar title="My App" class="action-bar priority-style">
</ActionBar>

and in your app.css (imports should always be first.. all CSS classess below will take priority)

@import 'nativescript-theme-core/css/core.light.css';

.priority-style {
    background-color: blue;
    color: white;
}

Use one of the two options depending on your style but keep in mind that CSS classes will have greater priority than element styling. In the same time, same styles applied by different CSS classes will be respected by their structural order in the CSS file.

NickIliev on 3 Jul 2017

👍2

All 4 comments

@marco-gagliardi I have tested the described scenario and the styles are applied successfully in this test project.

<ActionBar title="My App" class="action-bar">
</ActionBar>

So to resolve you issue and to make the global styles from your app.css to be respected you ahve two options.

First option - remove the CSS calss applied to your ActionBar

<ActionBar title="My App">
</ActionBar>

and when this is done the style applied on your element Actionbar in app.css will be respected.

ActionBar {
    background-color: red;
    color: white;
}

Second option - apply the CSS style via CSS class instaed of element and this way the CSS class applied last will take priority
e.g.

<ActionBar title="My App" class="action-bar priority-style">
</ActionBar>

and in your app.css (imports should always be first.. all CSS classess below will take priority)

@import 'nativescript-theme-core/css/core.light.css';

.priority-style {
    background-color: blue;
    color: white;
}

NickIliev on 3 Jul 2017

👍2

Hi @NickIliev you are totally right, applying a more specific selector (as in your second option) I could successfully overwrite the default stile for ActionBar element. Thank you!

marco-gagliardi on 3 Jul 2017

any possibility of making this work with iOS <ActionBar :class="appcolo + ' c-white'"> it works with Android