Css 如何定位此下拉框的下拉面板

我对这个问题的理解有的放矢

Dropdown个

这是HTML码.这里使用的类很少.

<div *ngIf="showConsumptionTypeSection" class="field third">
    <p class="label">Timezone</p>
    <p *ngIf="!editSettings" class="value">{{ getSelectedTimeZone(step.get('timeZone').value)  }} </p>
    <mat-select *ngIf="editSettings" 
        color="primary"           
        formControlName="timeZone" 
        placeholder="Select a timezone"
        [(value)]="selectedTimeZone" panelClass="custom-panel-timezone">  
        <mat-option *ngFor="let t of utcTimezoneList" [value]="t.value">{{t.text}} </mat-option>
    </mat-select>
</div>

在style.scss中应用的css设置

.custom-panel-timezone {
  margin: 42px 0px !important;
}

但使用此设置时，即使将!important应用于文本框，它也会显示在文本框上方.其他类设置将应用于其相关的TS文件.

与TS文件相关CSS文件如下.

.field {
    margin-bottom: 24px;
    .custom-file{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    &.full {
        width: 100%;
    }

    &.half {
        width: 100%;

        @include small {
            width: calc(50% - 15px);
        }
        @include xlarge {
            width: calc(50% - 25px);
        }
    }

    &.third {
        width: 100%;

        @include small {
            width: calc(33.333% - 15px);
        }
        @include xlarge {
            width: calc(33.333% - 25px);
        }
    }

    p.label {
        color: $gray;
        margin-bottom: 8px;
    }

    p.value {
        color: $primary;
        margin: 0;
        font-weight: 700;
    }

    p.valuepc {
        color: $primary;
        margin: 0;
        font-weight: 700;          

        @include large{
            float: left;
            width: 20%;
        }
    }

    p.valuesc {
        color: $primary;
        margin: 0;
        font-weight: 700;
        
        @include large{
            float: left;
            width: 20%;
        }
    }

    .color-palette {
        position: relative;

        input[type="text"] {
            &:read-only {
                background: $white;
                cursor: default;
            }
        }

        input[type="color"] {
            position: absolute;
            visibility: hidden;
            left: 0;
            bottom: -15px;
            transform: translate(0, -50%);
            width: 25px;
            padding: 0;
            margin: 0;
        }

        .mat-icon {
            position: absolute;
            right: 7.5px;
            top: 50%;
            transform: translate(0, -50%);
            color: $primary;
            cursor: pointer;

            &.secondary {
                color: $secondary;
            }
        }
    }

    .prmcolorsection{

        @include large{
            width: 30%;
        }
       
    }
    .color-box{
        width: 25px;
        height: 25px;
        border-radius: 4px;
        @include large{
            float: right;
        }
    }

    .seccolorsection{
        @include large{
            width: 30%;
        }
    }
}

EDIT个

我在最近的调查中发现了一条重要线索.当我注释掉_material-overrides.scss的整个文件时，我们的panelClass工作正常，但只有一次.以下是下面_material-overrides.scss个文件的代码.

::ng-deep {

  // Material updates
  .mat-drawer-inner-container {
    overflow: hidden !important;
  }

  .mat-checkbox {
    .mat-checkbox-frame {
      border-width: 1px !important;
    }

    .mat-ripple-element {
      background: $primary !important;
    }

    .mat-checkbox-label {
      color: $darkGray;
      line-height: 21px;
    }

    &.mat-checkbox-checked {
      .mat-checkbox-background {
        background: $secondary;
        border-radius: 2px;
      }
    }
  }

  .util-color {
    .mat-checkbox {
      .mat-ripple-element {
        background: $utilPrimary !important;
      }

      &.mat-checkbox-checked {
        .mat-checkbox-background {
          background: $utilPrimary !important;
        }
      }
    }
  }

  // Override Bootstrap icon width/height
  .mat-icon.fa {
    width: auto;
    height: auto;
  }

  // Snackbar
  .mat-snack-bar-container {
    color: $white;
    margin: 5.5px 20px;
    min-width: 220px !important;
    max-width: 500px !important;

    @media screen and (max-width:375px) {
      font-size: 12px !important;
    }

    &.error {
      background: $red;
    }

    &.warning {
      background: $yellow;
      color: black;
    }

    &.success {
      background: $green;
    }

    .mat-simple-snackbar-action button {
      color: $white;
    }
  }

  .mat-snack-bar-handset {
    width: auto !important;
  }

  // Stepper - horizontal
  .mat-stepper-horizontal {
    .mat-horizontal-stepper-header-container {
      margin-bottom: 10px;

      .mat-horizontal-stepper-header {
        height: 50px;
        padding: 0 5px 0 10px;

        .mat-step-icon {
          background: $matStepUnvisited;
        }

        .mat-step-icon-selected {
          background: $matStepActive;
        }

        .mat-step-icon-state-edit {
          background: $matStepVisited;
        }

        .mat-step-label {
          display: none;
          color: $matStepText;

          @include small {
            display: block;
          }
        }
      }

      .mat-stepper-horizontal-line {
        margin: 0;
        color: $matStepHorizontalLine;
      }
    }

    .mat-horizontal-content-container {
      position: relative;
      padding: 5px;
    }

    &.util-color {

      .mat-step-icon-selected,
      .mat-step-icon-state-edit {
        background: $primary !important;
      }
    }
  }

  // Select
  .mat-select {
    border: 1px solid rgb(206, 212, 218);
    padding: 9.5px 9.5px 9.5px 15px;
    border-radius: 6px;
    margin-bottom: 16px;

    &.mat-select-disabled {
      opacity: 5;
    }

    .mat-select-trigger {
      height: auto;
    }
  }

  .mat-option {
    padding: 0 10px !important;

    @include small {
      padding: 0 16px !important;
    }
  }

  .mat-input-element {
    &.filter-select-options {
      padding: 12px 16px !important;
      width: calc(100% - 32px) !important;
      border-bottom: 1px solid rgba(0, 0, 0, .125) !important;
    }
  }

  // Mat Table
  .mat-table {
    .mat-header-row {
      height: 50px !important;

      .mat-header-cell {
        color: $secondary;
        padding: 12px 10px !important;
        font-size: 16px;
        font-weight: 700;

        &.min-width-90 {
          min-width: 90px;
        }

        &.sixth {
          width: 15% !important;
        }

        &.fifth {
          width: 20% !important;
        }

        &.quarter {
          width: 25% !important;
        }

        &.half {
          width: 50% !important;
        }
      }
    }

    .mat-row {
      height: 50px !important;

      .mat-cell {
        color: $darkGray;
        padding: 12px !important;
        font-size: 16px;

        &.sixth {
          width: 15% !important;
        }

        &.fifth {
          width: 20% !important;
        }

        &.quarter {
          width: 25% !important;
        }

        &.half {
          width: 50% !important;
        }
      }

      &:last-child {
        .mat-cell {
          border-bottom: none !important;
        }
      }
    }
  }

  // Mat Paginator
  .mat-paginator {
    .mat-paginator-container {
      padding: 0;

      .mat-paginator-page-size {
        display: none !important;
      }

      .mat-paginator-range-actions {
        flex: 1;

        .mat-paginator-range-label {
          font-size: 16px;
          color: #858796;
          margin: 0;
          padding-left: 12px;
        }

        .mat-focus-indicator[ng-reflect-disabled="false"] {
          color: $primary;
        }

        .mat-paginator-navigation-first {
          margin-left: auto;
        }
      }
    }
  }

  // Mat Calendar
  .mat-calendar {
    .mat-calendar-body {
      .mat-calendar-body-selected {
        background: $primary;
      }

      .mat-calendar-body-in-preview::before,
      .mat-calendar-body-in-range::before {
        border: none;
        background: rgba(0, 0, 0, 0.05);
      }

      .mat-calendar-body-preview-end {
        .mat-calendar-body-cell-content.mat-focus-indicator {
          background: transparent !important;
          border: 1px solid $primary;
        }
      }

      .mat-calendar-body-cell:hover:not(.mat-calendar-body-preview-end) {
        .mat-calendar-body-cell-content.mat-focus-indicator:not(.mat-calendar-body-selected) {
          border: none;
          background: rgba(0, 0, 0, 0.15);
        }
      }
    }
  }

  // Mat Datepicker Toggle
  .mat-form-field.datepicker-widget {
    .mat-form-field-wrapper {
      padding: 0;

      .mat-form-field-flex {
        display: flex;
        align-items: center;
        background: transparent;
        padding: 0;

        .mat-form-field-infix {
          border: none;
          padding: 0;
        }
      }

      .mat-date-range-input-container {
        justify-content: flex-end;
      }

      .mat-input-element,
      .mat-date-range-input-separator {
        color: $darkGray;
      }

      .mat-datepicker-toggle {
        button {
          color: $primary;
        }
      }
    }
  }

  // Mat Tab Group
  .mat-tab-group {
    .mat-tab-header {
      background: $matStepTab;

      .mat-tab-list {
        .mat-ink-bar {
          background: $primary;
        }
      }

      .mat-tab-label {
        text-transform: uppercase;
      }
    }

    .mat-tab-body {
      padding: 0 10px 20px;
    }
  }

  // Mat Switch
  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background: $secondary;
  }

  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    background: rgba(21, 105, 158, .8);
  }

  #chartTypeToggle,
  #chartToggle {
    .mat-slide-toggle-thumb {
      background: $secondary !important;
      animation: slideToggleAnim ease .35s;

      @keyframes slideToggleAnim {
        0% {
          opacity: 0;
        }

        50% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }
    }

    .mat-slide-toggle-bar {
      background: rgba(21, 105, 158, .8) !important;
    }
  }

  // Mat Progress Spinner
  .mat-progress-spinner circle,
  .mat-spinner circle {
    stroke: $secondary;
  }

  .mat-progress-spinner.white-stroke circle,
  .mat-spinner.white-stroke circle {
    stroke: $white;
  }

  // Mat Labels
  mat-label {
    color: $darkGray;
    font-weight: bold;
    padding-right: 10px;

    &.enabled {
      color: $primary;
      font-weight: bold;
      padding-right: 10px;
    }
  }
}