logo标签列表

如何在 Angular 5 中从父组件继承子组件的 CSS 样式

javascripthtmlcssangularangular5
31

我有一个父组件，其中包含一个子组件。父组件具有一些CSS类，而子组件扩展了它们。根据文档，我尝试使用:host，但似乎无法正常工作。

子组件：

<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
    <div class="body-content-inner-wrapper">
        <div class="body-content">
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
        </div>
    </div>
</div>
父组件:
         <div class="table container">
                 <div class="table-row header">
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                  </div>
            <app-child-component></app-child-component>
                </div>

父组件 CSS：

  :host  .table {
    display: table;
  }

  :host .table-row {
    display: table-row;
  }

  :host .table-cell {
    display: table-cell;
  }

  :host .container {
   width: 400px;
   height: 100vh;
  }

  :host  .header {
    background: cyan;
 }

   :host .body {
    background: yellow;
    height: 100%;
 }

  :host .body-content-outer-wrapper {
    height: 100%;
 }

 .body-content-inner-wrapper {
    height: 100%;
   position: relative;
   overflow: auto;
}

 .body-content {
    position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

问题在于，即使我在子组件中放置css类，由于有子组件模板存在，布局也会被破坏。因此，主要问题是子组件从父组件继承或扩展css的适当方式是什么？

4个回答
80

为什么让事情变得复杂？

理想的做法是在子组件中添加父级CSS文件的引用。

 @Component({
    selector: 'child-app',
    templateUrl: `./child.component.html`,
    styleUrls:['./parent/parent.component.css', './child.component.css']
})
export class ChildComponent { }
我的错误，无论如何还是谢谢。我刚刚发现没有父子架构，而是两个兄弟组件。在这种情况下，最好的方法是什么？我应该将类移动到全局CSS中吗？ - AlexFF1
如果两个兄弟都有父母，你可以按照我的答案建议去做。否则，你可以拥有一个共享的CSS文件，并在两个组件中的"StyleUrls"下添加共享CSS的引用。 - Dheeraj Kumar
Angular 2+的问题在于CSS会出现问题，因为类似于<app-child>> <div class "table-row body">这样的代码。虽然class table row是存在的，但它会破坏应用程序。只有当我将class移动到实际的<app-child>选择器中时，它才能正常工作。但我不需要这样做。 - AlexFF1
这里讨论得非常多：https://dev59.com/EVoV5IYBdhLWcg3wN8rh，看起来有一种方法是使用::ng-deep，但这很快就会被弃用，所以现在不存在任何选项。当存在多个父级想要覆盖同一个子级的CSS时，您的解决方案将失败。 - Manohar Reddy Poreddy
如果你再看一遍答案，它是关于子元素使用父元素的CSS而不是相反的情况，并且它也适用于多个父元素。 - Dheeraj Kumar
显示剩余11条评论
9
使用::ng-deep，样式将应用于当前组件，并向下传递到在组件树中作为当前组件的子级的组件。
例如：
:host ::ng-deep app-child-component {
       color:yellow;
     }

一个好的资源 - Angular 2+组件之间的样式
6
ng-deep 已经被弃用：angular.io/guide/component-styles - derpedy-doo
2
这个做法的新方式是什么？还是不再支持了吗？ - Leogout
7

除了使用::ng-deep和引用父级的css文件之外，另一种选择是使用封装组件属性：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  encapsulation: ViewEncapsulation.None
})

父级CSS将流动到它的所有子元素。
13
但它也会流向应用程序的其他部分，就像将login.component.css放入全局样式中一样。此外，这些组件容易破坏其他组件。 - mdarefull
1
@SoEzPz，那不是真的，我刚刚测试过了，我可以清楚地在任何父组件中应用在子组件scss中声明的类。ViewEncapsulation.None使这些样式全局化。 - michelepatrassi
1
为什么要把它复杂化，你只需将父组件的CSS导入到子组件的CSS中即可。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接