如何在 Angular4 中使用 Scss 將樣式設置為 ng-select 框

Question

我的 HTML 中有一個 ng-select 字段，我想將 css 的某些部分應用到該字段，這里我使用的是 scss，我不知道如何將這些代碼與我給出的類交叉，誰能幫我排序它出來。

Scss：

.box {
  background-color: #4389a9;
  width: 185px;
  height: 45px;
  padding: 8px 20px;
  right: -19px;
  cursor: pointer;
  top: 19px;
  transition: bottom 2s;
  border-radius: 24px;
  margin-bottom: 26px;
  select-dropdown {
    display: none;
  }
}

HTML：

<ng-select class="box" placeholder="Wiredelta" [options]="cities">Wiredelta</ng-select>

要添加到 scss 的 CSS 部分：

    ng-select > div > div.single > div.toggle {
    color: white !important;
    background: none;
}

ng-select > div {
    border:none !important
}

ng-select > div > div.single > div.placeholder {
    color: white;
    font-size: 35px;
    font-family: MontserratRegular; 
}

ng-select > div > div.single > div.clear:hover, ng-select > div > div.single > div.toggle:hover {
    background-color: #4389a9;
}

select-dropdown {
    display: none;
}

Answer 1

注意：

如果您使用的是angular cli ，則在添加component scss文件時將無法使用。 要使其工作，請將它們添加到styles.scss

這是你需要的scss，

ng-select {
    >div {
        >div.single {
            >div.toggle {
                color: white !important;
                background: none;
                &:hover {
                    background-color: #4389a9;
                }
            }
            >div.placeholder {
                color: white;
                font-size: 35px;
                font-family: MontserratRegular;
            }
            >div.clear {
                &:hover {
                    background-color: #4389a9;
                }
            }
        }
        border: none !important;
    }
}
select-dropdown {
    display: none;
}

Answer 2

假設我們要改變外觀輪廓的樣式：

我們可以將 css 覆蓋為：

 .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel
  .ng-dropdown-panel-items
  .ng-option.ng-option-selected.ng-option-marked {
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container.ng-appearance-outline:after,
.ng-select.ng-select-focused
  .ng-select-container.ng-appearance-outline:hover:after {
  border-color: #26808a !important;
}

.ng-select.ng-select-focused
  .ng-select-container
  .ng-value-container
  .ng-placeholder {
  transform: translateY(-1.28125em) scale(0.75) perspective(100px)
    translateZ(0.001px);
  color: #26808a !important;
}

.ng-select.ng-select-focused .ng-select-container .ng-arrow-wrapper .ng-arrow {
  color: #26808a !important;
}

.ng-select .ng-select-container.ng-appearance-outline {
  min-height: 51px !important;
}

ng-select 標簽：

<ng-select
  [items]="listofBanks"
  [(ngModel)]="selectedCity"
  bindLabel="firstName"
  bindValue="id"
  [searchFn]="customSearchFn"
  (change)="onSelection($event)"
  appearance="outline"
  class="custom"
></ng-select>

注意：適用於"@ng-select/ng-select": "^5.0.4"