相关疑难解决方法(0)

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

我有一个父组件:

<parent></parent>
Run Code Online (Sandbox Code Playgroud)

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

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>
Run Code Online (Sandbox Code Playgroud)

父模板:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>
Run Code Online (Sandbox Code Playgroud)

儿童模板:

<div class="child">Test</div>
Run Code Online (Sandbox Code Playgroud)

由于parentchild是两个单独的组件,他们的风格被锁定在他们自己的范围.

在我的父组件中,我尝试过:

.parent .child {
  // Styles for child
}
Run Code Online (Sandbox Code Playgroud)

.child样式没有应用于child组件.

我尝试使用styleUrlsparent样式表包含在child组件中以解决范围问题:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]
Run Code Online (Sandbox Code Playgroud)

但这并没有帮助,也尝试了另一种方式,即取出child样式表,parent但这也无济于事.

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

css angular-components angular

223
推荐指数
12
解决办法
15万
查看次数

标签 统计

angular ×1

angular-components ×1

css ×1