Javascript 角度-继承父样式的子组件（不透明度）

我想知道是否有办法阻止角度子组件继承父样式，主要是不透明度

我有一个表单包装器，它位于页面顶部，如下所示：

import{Component，EventEmitter，Output}来自“@angular/core”；
@组成部分({
选择器：“新建学生表单包装器”，
templateUrl:“./new student form wrapper.component.html”，
styleUrls:['./新的学生表单包装器.component.scss']
})
导出类NewStudentFormWrapperComponent{
@Output（）public onNewStudentFormClose:EventEmitter=neweventemitter（）；
public newStudentFormCloseClicked（）：void{
this.onNewStudentFormClose.emit（）；
}
}

：：ng deep{
.学生资料表{
不透明度：0；
}
}
.新学生表格包装{
z指数：50；
高度：100vh；
宽度：100vw；
位置：绝对位置；
背景色：白色；
不透明度：0.8；
c指针{
光标：指针；
}
}

使用实际包含表单行为的子组件：

从“@angular/core”导入{Component}；
@组成部分({
选择器：'新学生表格'，
templateUrl:“./new student form.component.html”，
styleUrls:['./新学生表单.component.scss']
})
导出类NewStudentFormComponent{
}

。学生详细信息表单{
不透明度：1；
背景色：紫色；/**仅用于测试不透明度*/
}

你好

但是，尽管实际上明确声明new-student-form.component的不透明度为0，它仍然采用容器的0.8不透明度规则

---

我肯定用ng deep是错误的，为孩子去除不透明的最好方法是什么？是否有封装规则可用于阻止样式泄漏到另一个组件中？

不透明度将作为一个整体应用于元素，包括其内容，即使该值不是由子元素继承的。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们彼此具有不同的不透明度

不完全确定它是否会提供您期望的结果，但要定义透明背景，您可以在背景上使用

rgba

：

.new-student-form-wrapper {
  z-index: 50;
  height: 100vh;
  width: 100vw;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
}

因为看起来您正在使用SCS，所以您还可以使用

透明化

实用程序功能：

background-color: transparentize(white, 0.2)

这样，表单包装器仍然有点透明，但任何子内容都将清晰可见

---

另一方面，这确实不是使用

：ng deep

的正确方法。虽然这是使用它的一种方式。您现在的编写方式将以类

.student details form

的文档中的任何元素为目标。要仅针对当前组件的子体，需要添加

：host

选择器：

:host ::ng-deep {
  .student-details-form {
    // style here
  }
}

为了更好地解释

：ng deep

，我将只使用一些示例。基本上，

：：ng deep

所做的是它不会将

\ngcontent-xxx-xxxx

属性选择器添加到发出的css中。（当您使用

ViewEncapsulation.simulated

时会发生这种情况，因此只在组件样式表中执行某些操作）

Soo，如果您的组件SCS中有以下内容：

::ng-deep {
  .form0 {
    opacity: 0;
  }
}

:host ::ng-deep {
  .form1 {
    opacity: 0.1
  }
}

:host {
  .form2 {
    opacity: 0.2;
  }
}

.form3 {
  opacity: 0.3;
}

.form-wrapper ::ng-deep {
  form4 {
    opacity: 0.4;
  }
}

这将导致如下结果：

.form0 {
  opacity: 0;
}

[_nghost-xxx-xxxx] .form1 {
  opacity: 0.1;
}

[_nghost-xxx-xxxx] .form2[_ngcontent-xxx-xxxx] {
  opacity: 0.2;
}

[_ngcontent-xxx-xxxx].form3 {
  opacity: 0.3;
}

.form-wrapper[_ngcontent-xxx-xxxx] .form4 {
  opacity: 0.4;
}

---

如您所见，如果在根目录上使用

：：ng deep

，则它是没有（模拟）封装的css。封装是通过主机和内容属性选择器模拟的

我仍然不太明白“`::ng deep``是如何工作的，在点击函数时总是让我感到困惑，看起来透明化也是rgba css本机函数的别名：我在sass_functions.scss

css*透明化（rgba（0,0,0,0.5），0.1）=>rgba（0,0,0,0,0.4）*透明化（rgba（0,0,0,0,0.8），0.2）=>rgba（0,0,0,0.6）

@MarcFreeman right，

transparentize

当您尝试透明化并且已经透明化颜色时，特别有用：D.关于

：：ng deep

，我会用解释更新我的答案