Question

我正在尝试通过将css文件导入子css文件中的子元素来将css文件应用于子组件中的组件，并使用以下方式影响嵌套的组件：encapsulation: ViewEncapsulation.None

但是通过将encapsulation设置为none，不仅会影响子组件中的嵌套组件，而且还会影响父组件，因为现在已将导入的css文件应用于父组件组件。

我的问题是，为什么在子组件中将encapsulation设置为none也会影响父组件？

Answer 1

将ViewEncapsulation设置为none将导致样式在其他模块和组件之间传播，因此，如果仅希望将它们应用于模块或父/子组件中，则可能不合适。 / p>

如果仅希望将CSS应用于该组件及其“嵌套”子组件，则可以尝试定义一个共享的CSS，它将在主要组件和子组件之间共享。不要将ViewEncapsulation设置为None。这就是您可以在该模块中构造文件的方式。

|--parent
   |--shared
      |-- shared.css
   |--components
      |--child
         |--child.component.ts
         |--child.component.css
   |--parent.module.ts
   |--parent.component.ts
   |--parent.component.html
   |--parent.component.css

然后在父组件和子组件的顶部附近的@Component类型修饰符上，可以包含所需css文件的相对/绝对路径。如您所见，shared.css包含在两个组件中，并且样式仅封装到这些组件中。

child.component.ts：

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css', '../../shared/shared.css'],
})

在您的parent.component.ts上，

@Component({
  selector: '',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css', './shared/shared.css'],
})

Answer 2

因为它们已成为您应用程序的全局样式。根据您在将encapsulation更改为ViewEncapsulation.None的组件中指定CSS选择器和类的方式，它们将应用于您应用程序中的所有组件。

为什么在子组件中将封装设置为none会影响父组件样式？

2 个答案: