Angular 组件包装器搞乱了 Bulma 样式

Question

我有点困惑如何使用 Bulma 为我的 Angular 应用程序设计样式来解决这个问题。我认为问题的症结在于Sass:

这一段

%block
  &:not(:last-child)
    margin-bottom: 1.5rem

=block
  @extend %block

当我有（比方说）两个并排的选项卡时，它们的间距为 1.5rem。但是，如果我制作一个包含相同选项卡内容的组件并将其中两个组件并排放置，填充就会消失，大概是因为一旦内容被隔离在 Angular 组件包装器中，无论这样做如何都无法保持.

Stackblitz demo

app.component.html

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

<tabs-component></tabs-component>
<tabs-component></tabs-component>

tabs.component.html

<div class="tabs is-medium">
  <ul>
    <li><a href="javascript:void(0);">Foo</a></li>
    <li><a href="javascript:void(0);">Foo</a></li>
  </ul>
</div>

渲染结果：

Answer 1

您的边距正在折叠。您可以将类添加到它的主机，并删除环绕它的 div 。这可以使用 @HostBinding();

来完成

组件：

import { Component, HostBinding } from '@angular/core';

@Component({
  selector: 'tabs-component',
  templateUrl: './tabs.component.html'
})
export class TabsComponent  {
 @HostBinding('class') classess = 'tabs is-medium'; 
}

HTML:

<ul>
  <li><a href="javascript:void(0);">Foo</a></li>
  <li><a href="javascript:void(0);">Foo</a></li>
</ul>

Angular 组件包装器搞乱了 Bulma 样式

Angular component wrapper messing up Bulma styles

bulma

angular