stenciljs - 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，这可能会影响您的样式。