如何覆盖 Ng-Bootstrap 样式中的样式并将 html 结构编辑为 Typeahead

Question

我正在使用 https://ng-bootstrap.github.io。我想用我的样式覆盖下拉菜单的样式，还想为 typeahead 组件更改一些 css 标签，但似乎看不到在哪里做这个？

代码:

<input id="sys_id" type="text" formControlName="sys_id" class="form-input" [ngbTypeahead]="search"/>

例如更改以下内容：

<ngb-typeahead-window class="dropdown-menu show" role="listbox" id="ngb-typeahead-0" style="position: absolute; top: 0px; left: 0px; transform: translate(199px, 354px);"><!----><!--bindings={
 </ngb-typeahead-window>

Answer 1

将这两行添加到 type-ahead-basic.ts 将设置样式

::ng-deep .dropdown-menu.show { background:lightblue;}
::ng-deep .dropdown-item { color:red !important; }

你可以检查一个工作stackblitz here - 如果有任何事情请告诉我

如何覆盖 Ng-Bootstrap 样式中的样式并将 html 结构编辑为 Typeahead

How override styles in Ng-Bootstrap styles and edit html structure to Typeahead

css

twitter-bootstrap

ng-bootstrap

angular