角度分量忽略Bulma字段css样式

Question

当包装一个Bulma“field”样式的元素在一个有角度的组件中时，底部的边距是缺失的。field类是通过@hostbinding('class')类='field'指令添加到组件中的，这是根据浏览器的正常工作。
我怀疑.field:not(:last-child)选择器可能有问题，但我想不出原因。

Stackblitz演示

app.component.html

<div class="field">
  <label class="label">Test
      <div class="control">
          <input type="text" class="input" />
      </div>
  </label>
</div>
<div class="field">
  <label class="label">Test
      <div class="control">
          <input type="text" class="input" />
      </div>
  </label>
</div>

<app-input></app-input>
<app-input></app-input>

input.component.html

<label class="label">Test
    <div class="control">
        <input type="text" class="input" />
    </div>
</label>

Input.Component.TS

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

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {
  @HostBinding('class') classes = 'field'; 

  constructor() { }

  ngOnInit(): void {
  }
}

这个问题在某种程度上建立在这个答案的基础上

Answer 1

问题是输入组件没有设置display属性。因此它被呈现为display：inline,它不能处理任何边距。

第一种解决方案：

将以下代码段添加到input.component.css中：

:host { display: block; }

方法1的工作示例

第二种解决方案：

将is-block添加到input.component.ts的CSS-类中

@HostBinding('class') classes = 'field is-block'; 

方法2的工作示例

希望这有帮助，圣诞快乐，结束和出去；-）