如何样式子组件从父组件的CSS文件?

我有一个父组件:

<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',
]

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

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

当前回答

也有同样的问题，所以如果你在scss/sass中使用angular2-cli，使用'/deep/'而不是'>>>'，最后的选择器还不支持(但适用于css)。

2016-10-15 12:03:43

其他回答

因为/deep/、>>>和::ng-deep都已弃用。最好的方法是在子组件样式中使用以下方法

:host-context(.theme-light) h2 {
  background-color: #eef;
}

这将在子组件的任何祖先中查找主题光。查看文档:https://angular.io/guide/component-styles#host-context

2020-10-09 07:58:15

我举一个例子来说明，因为角。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;
}

2017-09-08 11:33:16

这对我来说很有效

在父组件中:

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

2022-09-27 16:37:22

设'parent'是父类的类名，'child'是子类的类名

.parent .child{
//css definition for child inside parent components
}

你可以使用这个格式来定义父组件中的子组件的CSS格式

2020-08-15 08:42:04

我也有这个问题，不想使用弃用的解决方案所以我最后得出:

在parrent

 <dynamic-table
  ContainerCustomStyle='width: 400px;'
  >
 </dynamic-Table>

子组件

@Input() ContainerCustomStyle: string;

在child In HTML div中

 <div class="container mat-elevation-z8"
 [style]='GetStyle(ContainerCustomStyle)' >

在代码中

constructor(private sanitizer: DomSanitizer) {  }

  GetStyle(c) {
    if (isNullOrUndefined(c)) { return null; }
    return  this.sanitizer.bypassSecurityTrustStyle(c);
  }

作品像预期的那样，不应该被弃用;)

2019-04-03 11:54:15

如何样式子组件从父组件的CSS文件?

推荐文章

最新文章

标签