更改在 Angular 中使用 Select2 创建的下拉菜单的字体/背景颜色？

Question

我正在做一个项目。我想更改使用 select2 创建的下拉列表的背景/字体颜色。我想根据 ID 或 canonicalValue 更改颜色。

下面是创建选项的代码，

<select2 [data]="categoriesDropDownList" [value]="selectedCategoryId" [cssImport]="true" [options]="options"
(valueChanged)="onCategoryChange($event)">
</select2>

Answer 1

你说的

ng-select2-component

对吗？所以你有一个很大的

CSS

变量列表要检查：

/* Add application styles & imports to this file! */
:root {
  /* label */
  --select2-label-text-color: #000;
  --select2-required-color: red;

  /* selection */
  --select2-selection-border-radius: 4px;
  --select2-selection-background: #fff;
  --select2-selection-disabled-background: #eee;
  --select2-selection-border-color: #aaa;
  --select2-selection-focus-border-color: #000;
  --select2-selection-text-color: #444;

  /* selection: choice item (multiple) */
  --select2-selection-choice-background: #e4e4e4;
  --select2-selection-choice-text-color: #000;
  --select2-selection-choice-border-color: #aaa;
  --select2-selection-choice-close-color: #999;
  --select2-selection-choice-hover-close-color: #333;

  /* placeholder */
  --select2-placeholder-color: #999;
  --select2-placeholder-overflow: ellipsis;

  /* no result message */
  --select2-no-result-color: #888;
  --select2-no-result-font-style: italic;

  /* no result message */
  --select2-too-much-result-color: #888;
  --select2-too-much-result-style: italic;

  /* reset */
  --select2-reset-color: #999;

  /* arrow */
  --select2-arrow-color: #888;

  /* dropdown panel */
  --select2-dropdown-background: rgb(128, 54, 54);
  --select2-dropdown-border-color: #aaa;

  /* overlay */
  --select2-overlay-backdrop: transparent;

  /* search field */
  --select2-search-border-color: #aaa;
  --select2-search-background: #fff;
  --select2-search-border-radius: 0px;

  /* dropdown option */
  --select2-option-text-font-family: "Courier";
  --select2-option-text-color: #000;
  --select2-option-disabled-text-color: #999;
  --select2-option-disabled-background: transparent;
  --select2-option-selected-text-color: #000;
  --select2-option-selected-background: #ddd;
  --select2-option-highlighted-text-color: #fff;
  --select2-option-highlighted-background: #5897fb;
  --select2-option-group-text-color: gray;
  --select2-option-group-background: transparent;

  /* hint */
  --select2-hint-text-color: #888;

  /* for Material ------------------------------------------*/
  --select2-material-underline: #ddd;
  --select2-material-underline-active: #5a419e;
  --select2-material-underline-disabled: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.26) 0,
      rgba(0, 0, 0, 0.26) 33%,
      transparent 0
  );
  --select2-material-underline-invalid: red;
  --select2-material-placeholder-color: rgba(0, 0, 0, 0.38);
  --select2-material-selection-background: #ddd;
  --select2-material-option-selected-background: rgba(0, 0, 0, 0.04);
  --select2-material-option-highlighted-text-color: #000;
  --select2-material-option-selected-text-color: #ff5722;
}

将此添加到

styles.scss

。这个来自组件的官方

NPM Package

，见这里.

如果你也想改变

font-family

，你可以用你的一个类（或内联样式）来做

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, Select2Module, InfiniteScrollModule],
  template: `
    <h1>Hello from {{name}}!</h1>
    <a target="_blank" href="https://angular.io/start">
      Learn more about Angular 
    </a>
    <select2 [data]="data" [templates]="template">
      <ng-template #template let-data="data"><strong style="font-family: 'Courier'">{{data?.color}}</strong>: {{data?.name}}</ng-template>
    </select2>
  `,
})
export class App {
  name = 'Angular';
  data: Select2Data = [
    {
        value: 'heliotrope',
        label: 'Heliotrope',
        data: { color: 'white', name: 'Heliotrope' },
    },
    {
        value: 'hibiscus',
        label: 'Hibiscus',
        data: { color: 'red', name: 'Hibiscus' },
    },
];
}

在此示例中，结果如下所示：

这里是Stackblitz。

具体的更改，比如所选项目的颜色，需要按照以下方式进行：

select2.custom .select2-container .select2-selection--single .select2-selection__rendered > span {
  color: yellow;
}

这里我们需要组件本身的所有子类都更改为我们想要的标签颜色（这没有！重要）。现在你可以像这样通过

ngClass

灵活地改变班级：

<select2 [ngClass]="{'custom': condition === true}"></select2>

提示使用浏览器开发工具找到你想要的对象。