Angular 组件忽略 Bulma 字段 css 样式

Question

在 angular 组件中包装 Bulma“字段”样式的元素时，底部边距缺失。 class 字段是通过 @HostBinding('class') classes = 'field' 指令添加到组件中的，这取决于浏览器是否正常工作。
我怀疑 .field:not(:last-child) 选择器可能有问题，但我不知道为什么。

Stackblitz demo

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: inline，无法处理任何边距。

第一个解：

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

:host { display: block; }

Working example for method 1

第二种解法：

您将 is-block 添加到 input.component.ts

的 css-类

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

Working example for method 2

希望这对您有所帮助，圣诞快乐，从头到尾 ;-)

Angular 组件忽略 Bulma 字段 css 样式

Angular component ignoring Bulma field css style

css

bulma

angular