Can't apply component styles

[nikis]

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.

@Component({
	selector:'child',
	moduleId: module.id,
	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",
    moduleId: module.id,
    templateUrl: `
    <StackLayout class="parent-class">
        <child></child>
    </StackLayout>
    `,
    styles: [`
    .parent-class .label-one {
        color:green;
    }
    .parent-class child .label-one {
        color: green;
    }
    .parent-class .child-class .label-one {
        color: green;
    }
    `]
})
export class ParentComponent {}

[NickIliev]

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.

<child class="someCssClass"></child>  <!-- this won't work -->

@nikis can yu please provide the version of the angular dependencies you have used on your side (the content of root package.json)

[nikis]

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.

[ludcila]

Hi, will this be fixed soon?

[joeizy]

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?
Thanks!!

[justindujardin]

You can work around this issue by doing two things:

1. Disable the view encapsulation on your parent component
2. Target your styles against class names in the child that are NOT the component itself. i.e. do not target child but rather target the class applied to its StackLayout element .child-class

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 {}

[airandfingers]

@justindujardin's ViewEncapsulation.None workaround seems to be the same as just moving all of parent's style definitions into app.css. This seems to be expected behavior for Angular: SO question.

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 ::ng-deep pseudoselector.

This is working for me with Angular 4.4.6:

:host ::ng-deep .child-class .label-one {
    color: green
}

However, this looks like it'll be short-lived:

The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

[NickIliev]

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 Button (:active). The ng-deep pseudo selector is not supported in NativeScript.