在Angular2中使用css向ng2-select2添加样式

Posted 2023-05-07

【中文标题】在Angular2中使用css向ng2-select2添加样式

【英文标题】：Adding style using css to ng2-select2 in Angular2

【发布时间】：2017-08-04 20:28:56

【问题描述】：

我在我的 Angular2 项目中使用ng2-select2，我想添加一些样式，例如宽度、高度、边框半径、字体粗细、字体大小……但我无法管理它。

我的 html 代码是这样的：

<select2 [data]="exampleData"></select2>

我也尝试将 class 和 id 添加到我的 select2 元素中，但它不起作用。你知道我该怎么做吗？

【参考方案1】：

如果你想使用“宽度”，你可以将它与 Select2Options 类一起使用。

在你的组件中只定义一个 Select2Options 对象：

let options: Select2Options;

设置你想要的属性：

this.optionsSelect = 
  placeholder: "Select option...",
  allowClear: true,
  width: "100%"

在您的 html 中，将 [options] 输入与您的选项名称一起输入：

<select2 [data]="seccion" [cssImport]="true" (valueChanged)="onSeccionChange($event)" [options]="optionsSelect"></select2>

使用这个类你可以自定义一些东西，例如：添加一个占位符，或者允许保持选择而不选择。

就我而言，我正在尝试更改背景颜色，但找不到解决方案。

【讨论】：

对于您的背景情况，您可以在 optionsSelect 属性 dropdownCss 中添加您需要的样式，例如：dropdownCss: backgroundColor: 'red'

【参考方案2】：

您可以尝试自定义组件

    @Component(
            selector: "your-component",
            templateUrl: "your-template.component.html",
            styles: [`
                    :host >>> .select2-container 
                                min-width: 1000px;
                    
            `]
    )

【参考方案3】：

你必须像这样使用回购描述中提到的width属性

<select2 [width]="dynamic_width"></select2>

参考这里

https://github.com/NejcZdovc/ng2-select2#inputs

否则您可以使用ngStyle 或ngClass 动态绑定样式（PS：- 未测试）

【讨论】：

是的，但只是宽度，它只能内联使用。放到css文件里就不行了

不，它在 css 中不起作用，你必须在 HTML 本身中设置，也只是宽度，因为 repo 的作者只提到了宽度。请参阅附加链接@Kavoos

@pardeepjain_90，我找到了解决方案！我需要打开 Chrome 控制台。在那里你可以看到 元素转换为不同的元素，我必须找到他们使用的正确类，然后覆盖它们。总之很烦人！

如果你能找到解决方案，那就太好了，是的，唯一剩下的选择就是覆盖元素的默认类。