Question

我在Angular项目中一起使用Clarity和Bootstrap，但是样式冲突似乎突然出现，因为样式无法按预期工作。

我尝试过在Chrome devtools中更改CSS。我注意到reboot.scss可能会引起一些问题，但是我不知道该怎么办。

这是组件代码。

<h3>New Post</h3>
<form #productEditorForm="ngForm" clrForm>
  <clr-select-container>
    <label>Location</label>
    <select clrSelect name="Location" [(ngModel)]="LocationID">
      <option *ngFor="let location of Locations" [value]="location.ID">{{ location.Name }}</option>
    </select>
  </clr-select-container>
  <clr-input-container>
    <label>Images</label>
    <input clrInput #files type="file"/>
  </clr-input-container>
  <button class="btn btn-primary" type="submit">Post</button>
</form>

选择框的预期外观类似于示例found here。该按钮的预期外观类似于主按钮found here；按钮的字体大小应该是.5rem，但实际大小是1。预期的默认字体是Metropolis，但是实际字体是Segoe UI。该页面不应具有闪烁的滚动条和不稳定的内容，但实际页面却可以。我从这里去哪里？

Answer 1

有许多Angular轮播实现（该实现基于Bootstrap，但可以单独使用https://ng-bootstrap.github.io/#/getting-started），它们将能够提供必要的功能。

如果您确实加载了Bootstrap，则希望在Clarity之前加载它，这样Clarity在样式上拥有最终决定权。

使用表单时如何解决Bootstrap和Clarity样式冲突

1 个答案: