我有一个父组件:

<parent></parent>

我想用子组件填充这个组:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

父模板:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

子模板:

<div class="child">Test</div>

由于父组件和子组件是两个独立的组件,它们的样式被锁定在自己的范围内。

在我的父组件中,我尝试这样做:

.parent .child {
  // Styles for child
}

但是.child样式没有应用到子组件。

我尝试使用styleUrls将父组件的样式表包含到子组件中,以解决范围问题:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

但这并没有帮助,我还尝试了另一种方法,将子样式表取到父样式表中,但这也没有帮助。

那么,如何样式包含在父组件中的子组件呢?


当前回答

这对我来说很有效

在父组件中:

<child-component [styles]="{width: '160px', borderRadius: '16px'}" >
</child-component>

其他回答

我发现如果你可以访问子组件代码,传递@INPUT变量会更简洁:

这个想法是,父进程告诉子进程它的外观状态应该是什么,而子进程决定如何显示这个状态。这是一个很好的建筑

SCSS道:

.active {
  ::ng-deep md-list-item {
    background-color: #eee;
  }
}

更好的方法:-使用选定的变量:

<md-list>
    <a
            *ngFor="let convo of conversations"
            routerLink="/conversations/{{convo.id}}/messages"
            #rla="routerLinkActive"
            routerLinkActive="active">
        <app-conversation
                [selected]="rla.isActive"
                [convo]="convo"></app-conversation>
    </a>
</md-list>

简单的回答是,你根本不应该这么做。它破坏了组件封装,破坏了从自包含组件中获得的好处。考虑将道具标志传递给子组件,然后它可以自行决定如何以不同的方式呈现或应用不同的CSS,如果需要的话。

<parent>
  <child [foo]="bar"></child>
</parent>

Angular不赞成所有影响父样式的子样式的方法。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

可悲的是/deep/选择器已弃用(至少在Chrome中) https://www.chromestatus.com/features/6750456638341120

简而言之,(目前)似乎没有长期的解决方案,除了以某种方式让你的子组件动态地设置样式。 你可以传递一个样式对象给你的孩子,并通过以下方式应用它: < div [attr.style] = " styleobject " > 或者如果你有一个特定的风格,你可以使用像这样的东西: < div [style.background-color] = " colorvar " >

更多与此相关的讨论: https://github.com/angular/angular/issues/6511

我举一个例子来说明,因为角。io /指导/组件样式:

阴影穿透的后代组合子已弃用,并已从主要浏览器和工具中移除支持。因此,我们计划在Angular中放弃对/deep/、>>>和::ng-deep的支持。在此之前,::ng-deep应该优先考虑与这些工具的广泛兼容性。

在app.component.scss上,导入您的*。如有需要,可使用SCSS。_colors。SCSS有一些常见的颜色值:

$button_ripple_red: #A41E34;
$button_ripple_white_text: #FFF;

对所有组件应用规则

所有具有btn-red类的按钮都将被样式化。

@import `./theme/sass/_colors`;

// red background and white text
:host /deep/ button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

将规则应用到单个组件

app-login组件上所有具有btn-red类的按钮都将被样式化。

@import `./theme/sass/_colors`;

/deep/ app-login button.red-btn {
    color: $button_ripple_white_text;
    background: $button_ripple_red;
}

我希望通过以下方式实现这一目标:

使用@Component将css类添加到宿主元素,并将封装设置为none。然后在组件style.css.scss中引用添加到宿主的类,这将允许我们声明只影响我们自己和我们类范围内的子类的样式。初版

@Component({
  selector: 'my-component',
  templateUrl: './my-component.page.html',
  styleUrls: ['./my-component.page.scss'],
  host: {
    class: 'my-component-class'
  },
  encapsulation: ViewEncapsulation.None
})

结合下面的CSS (my-component.page.scss)

// refer ourselves so we are allowed to overwrite children but not global styles
.my-component-class {
  // will effect direct h1 nodes within template and all h1 elements within child components of the 
  h1 {
    color: red;
  }
}
// without class "scope" will affect all h1 elements globally
h1 {
  color: blue;
}