素材コンポーネントのスタイルが変更されない

Question

こんにちは 私はプロジェクトのために角度5と素材を使用していますが、私はオートコンプリートパネルの幅を変更しようとしています。しかし、私はオプションのすべての情報を表示することはできません、その後、私は新しいコンポーネントのCSSファイルを変更しましたが、それは材料のコンポーネントのために働かない、誰かが私にそれを行う方法を教えてくださいできますか？

これは、コンポーネントの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 ::ng-deep mat-autocomplete-panel(class1) { 
    width : 400px; 
} 

エラーはどこですか？

オプションのすべての情報を表示したいと思います。

実際、CSSファイルでは、ボタンスタイルが正しく適用されます。オートコンプリートパネルでは機能しません、なぜですか？

ありがとうございます。

Answer 1

あなたのcssからコンマを削除すると（幅が有効になります）、疑似要素ではないためホストを疑似として使用することはできません。ここPseudosリスト：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

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