如何在没有 ng-deep 的情况下从父级的 SCSS 设置子组件的样式? [英] How do I style child component from parent's SCSS without ng-deep?

问题描述

我一直试图在不使用 ::ng-deep 的情况下从 HeaderComponent 设置 BoxedComponent 样式，但我没有找到一种方式如此正确.

BoxedComponent 组件类只包含一个 ViewEncapsulation.None.

@Component({选择器:实验室盒装"，templateUrl: './boxed.component.html',styleUrls: ['./boxed.component.scss'],封装:ViewEncapsulation.None，})导出类 BoxedComponent {}

HTML

<ng-content></ng-content>

我在它的 SCSS 文件中创建了两个类以在任何地方使用，但我意识到由于同样的问题，我仍然无法设计组件的响应性.

.boxed {/* 规则 */}.tall .boxed {高度:500px；宽度:360px；}.squared .boxed {高度:340px；宽度:340px；}

在 HeaderComponent 的 HTML 文件中，我使用了 labs-boxed 如下:

<labs-boxed [ngClass]="'tall'"><p>.........

到目前为止它可以工作，但是在输入 SCSS 文件之后，我尝试了多种方法来访问 lab-boxed 的样式并对其进行更改:

.boxed { ... }.tall .boxed { ...}

等等，但没有成功.

请问我该怎么做?

解决方案

由于 BoxedComponent 具有 ViewEncapsulation.None 所有在 boxed.component.scss<中定义的规则/code> 成为全球性的.当 HeaderComponent 具有默认封装时，header.component.scss 中定义的所有规则都与全局范围隔离并特定于 HeaderComponent.事实上，ng-deep 的工作原理是将单个规则设为全局.换句话说，它从孤立的范围中删除规则并将其放入全局范围，这是在封装的样式文件中使单个规则全局化的唯一方法.无需 ng-deep 的帮助，您可以通过以下方式覆盖子组件样式；

1. 将另一个全局样式应用于子项并将相关样式添加到全局；styles.scss 文件.

   • 在 header.component.html 中
   • 在styles.scss中

   .custom-box-style .boxed {//新规则}

2. 以编程方式在特定子实例上设置样式.

   • 在 header.component.html 中

   <labs-boxed #childEl class="squared">平方和红色</labs-boxed>

   • 在 header.component.ts 中

   @ViewChild('childEl', {read: ElementRef, static: true}) childEl: ElementRef;ngAfterViewInit() {const box = this.childEl.nativeElement.getElementsByClassName("boxed");box[0].style.backgroundColor = "红色"}

这是两种方法的演示.

I've been trying to style a BoxedComponent style from HeaderComponent without using ::ng-deep, but I'm not finding a way to so properly.

The BoxedComponent component class contains nothing different but a ViewEncapsulation.None.

@Component({
  selector: 'labs-boxed',
  templateUrl: './boxed.component.html',
  styleUrls: ['./boxed.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class BoxedComponent {}

HTML

<div class="boxed">
  <ng-content></ng-content>
</div>

I created two classes in its SCSS file to use everywhere, but I realized I couldn't still stylize the responsiveness of the component due to the same problem.

.boxed {
  /* rules */
}

.tall .boxed {
  height: 500px;
  width: 360px;
}

.squared .boxed {
  height: 340px;
  width: 340px;
}

In HeaderComponent's HTML file, I am making use of labs-boxed as follows:

<div id="who-we-are" class="d-flex justify-content-around">
  <labs-boxed [ngClass]="'tall'">
    <p>
    ...
  ...
...

So far it works, but then entering in the SCSS file, I have attempted many ways to access lab-boxed's styles and changing it:

.boxed { ... } .tall .boxed { ...}

and so on, but without success.

How can I do it, please?

解决方案

Since BoxedComponent has ViewEncapsulation.None all rules defined in boxed.component.scss becomes global. When HeaderComponent has default encapsulation, all rules defined in header.component.scss are isolated from global scope and becomes specific to HeaderComponent. As a matter of fact ng-deep works by making single rules global. In other words it removes rules from isolated scope and puts into the global scope and it is the only way of making a single rule global within an encapsulated styles file. Without help of ng-deep you can override child component styles in following ways;

1. Apply another global style to child and add related styles to global; styles.scss file.

   • in header.component.html

   <labs-boxed class="custom-box-style">
   

   • in styles.scss

   .custom-box-style .boxed {
     // new rules
   }
   

2. Programatically set styles on specific child instance.

   • in header.component.html

   <labs-boxed #childEl class="squared">squared and red</labs-boxed>
   

   • in header.component.ts

   @ViewChild('childEl', {read: ElementRef, static: true}) childEl: ElementRef;
   
   ngAfterViewInit() {
     const box = this.childEl.nativeElement.getElementsByClassName("boxed");
     box[0].style.backgroundColor = "red"
   }
   

Here is a demonstration of both approaches.

这篇关于如何在没有 ng-deep 的情况下从父级的 SCSS 设置子组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！