StencilJS样式化其他组件

Question

我从另一个要向其添加边距值的组件中调用了一个简单的组件。

示例：

子组件：

import { Component } from '@stencil/core';


@Component({
  tag: 'app-header',
  styleUrl: 'app-header.css',
  shadow: false
})
export class AppHeader {

  render() {
    return (
      <div class='app-header-component'>
        Hey I'm a header
      </div>
    );
  }
}

父组件

import { Component } from '@stencil/core';

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css'
})
export class AppHome {

  render() {
    return (
      <div class='app-home'>
        <app-header></app-header>
      </div>
    );
  }
}

父组件样式

// app-home.css

app-header {
    margin-top: 1rem;
}

如何将样式应用于子组件？

编辑

我意识到我可以将子组件作为目标，然后应用样式。

// app-home.css

app-header {
    .app-header-component {
        margin-top: 1rem;
    }
}

Answer 1

您可能需要添加到子组件：

// app-header.css
app-header {
  display: block;
}

默认情况下，“自定义元素”为display: inline，这可能会影响您的样式。