css - Material 组件的更改样式不起作用

Question

你好，我在我的元素中使用 Angular 5 和 Material ，我正在尝试更改自动完成面板的宽度，例如，我现在可以正确显示选项，但我看不到选项的所有信息，然后我修改了新组件的 css 文件，但它不适用于 Material 组件，有人能告诉我该怎么做吗？

这是组件的html:

<mat-expansion-panel [expanded]="panelOpenState === true">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Critère de recherche
        </mat-panel-title>
        <mat-panel-description>
          Saisir un numéro de procédure
        </mat-panel-description>
      </mat-expansion-panel-header>

      <mat-form-field>
        <input id="autocomplete" type="text" matInput placeholder="number" [ngControl]="inputControl"  
                [(ngModel)]="searchValue" [matAutocomplete]="auto" (keyup)="onChange()">
        <mat-autocomplete #auto="matAutocomplete" class="class1">
          <mat-option *ngFor="let procedure of filteredProcedures | async" [value]="procedure.procedureId">
            <span>{{procedure.procedureId}} | </span>
            <small>{{procedure.firstName}} </small>
            <small>{{procedure.lastName}}</small>
            <small>{{procedure.userId}}</small>
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
      <button class="pull-right btn btn-info" (click)="search()">
        <span matTooltip="Chercher une procédure">
          <i class="fa fa-search"></i> Chercher </span>
      </button>
    </mat-expansion-panel>

和 css 文件:

.mat-button {
    color: white
}

#autocomplete {
    width: 400px, !important;
}
.class1 {
    width: 400px, !important;
}

.cdk-overlay-pane {
    width: 400px;
}

我也尝试过使用 :host，但它不起作用。

:host ::ng-deep mat-autocomplete-panel(class1) {
   width : 400px;
}

能告诉我错误在哪里吗？

我想显示选项的所有/更多信息。

事实上，通过 css 文件，按钮样式被正确应用。但它对自动完成面板不起作用，为什么？

谢谢。

Answer 1

从您的 css 中删除逗号(然后宽度有效)并且您不能将 :host 用作伪元素，因为它不是伪元素。伪列表在这里:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

#autocomplete {
        width: 400px !important;
    }
    .class1 {
        width: 400px !important;
    }