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

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 对样式有最终决定权。