-
-
Notifications
You must be signed in to change notification settings - Fork 241
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can't apply component styles #769
Comments
Confirming that styling a child component via its parent is not working at this very moment ("nativescript-angular": "~1.5.1",). Sample project to demonstrate the described scenario can be found here. Also, currently we can not apply styles directly on the child components e.g.
@nikis can yu please provide the version of the angular dependencies you have used on your side (the content of root package.json) |
package.json {
"dependencies": {
"@angular/animations": "~4.0.0",
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/forms": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"nativescript-angular": "~1.5.1",
"nativescript-theme-core": "~1.0.2",
"reflect-metadata": "~0.1.8",
"rxjs": "~5.2.0",
"tns-core-modules": "2.5.2",
"zone.js": "~0.8.2"
},
"devDependencies": {
"babel-traverse": "6.24.1",
"babel-types": "6.24.1",
"babylon": "6.16.1",
"lazy": "1.0.11",
"nativescript-dev-android-snapshot": "^0.*.*",
"nativescript-dev-sass": "^1.1.0",
"nativescript-dev-typescript": "~0.3.5",
"typescript": "~2.1.0"
}
} In case some other users have same issue, the current workaround that i found is to import all my css files into app.css and remove styles and styleUrls from components, similar how ionic framework styles work for each page or component. |
Hi, will this be fixed soon? |
Any ETA or easy workaround? Manually importing each component CSS file into app.css sounds painful. Is there an older version that works correctly while this is fixed? |
You can work around this issue by doing two things:
Here's the updated OP code that works as expected: @Component({
selector: 'child',
template: `
<StackLayout class="child-class">
<Label text="Label 1" class="label-one"></Label>
<Label text="Label 2" class="label-two"></Label>
</StackLayout>
`,
styles: [`
.label-one {
color: red;
}
.label-two {
color: blue;
}
`]
})
export class ChildComponent {}
@Component({
selector: 'parent',
encapsulation: ViewEncapsulation.None,
template: `
<StackLayout class="parent-class">
<child></child>
</StackLayout>
`,
styles: [`
.parent-class .child-class .label-one {
color: green;
}
`]
})
export class ParentComponent {} |
@justindujardin's ViewEncapsulation.None workaround seems to be the same as just moving all of Since my parent's CSS files contain many style declarations, and I only have a couple that need to cascade down to the child, it's cleaner for me to just move these couple styles to app.css. To my surprise, Angular has a way to do this cleanly: the This is working for me with Angular 4.4.6:
However, this looks like it'll be short-lived:
|
Closing this one as there is an easy workaround. Note: NativeScript supports only a subset of CSS and as of this moment pseudo-selectors are supported only for |
I have two components ChildComponent and ParentComponent and i'am trying to style child component from my parent component but there are no luck.
If i move my styles into global app.css file everything works correct, but it loses modularity.
The text was updated successfully, but these errors were encountered: