web-dev-qa-db-ja.com

angular 2つのマテリアルスタイルを上書きする方法は？

angularマテリアルでこれを選択しています：

enter image description here

そのコード：

<md-select placeholder="Descuentos y convenios" [(ngModel)]="passenger.discount">
        <md-option [value]="null" [disabled]="true">
            Descuentos
        </md-option>
        <md-option *ngFor="let option of discounts" [value]="option">
            {{ option }}
        </md-option>
        <md-option [value]="null" [disabled]="true">
            Convenios
        </md-option>
        <md-option *ngFor="let option of agreements" [value]="option">
            {{ option }}
        </md-option>
</md-select>

そして、私はそれにこのスタイルを持ちたいです：

enter image description here

Md-selectとmd-optionにいくつかのクラスを追加しようとしましたが、うまくいきませんでした。背景色や境界線をどのように配置するかのほんの一例になりたいのですが、それがアイデアを与えてくれるでしょう。

前もって感謝します

cssangularangular-material
17
Kimy BF

クラスは動作するはずですが、ビューのカプセル化のために / deep / を使用する必要があるかもしれません。

これを試して：

/deep/ md-select.your-class {
  background-color: blue;
}

theming で遊ぶこともできます。

33
André

マテリアル2 scssテーマを使用してスタイルの問題を解決できる場合、それは「正しい」方法であり、サイトへのリンクです。 https://material.angular.io/guide/theming 。

ただし、マテリアルスタイルを上書きしたくないスタイルでは！importantを使用しました。

使用方法は次のとおりです。

/*hack to get rid of a scrollbar*/
.cdk-focus-trap-content{
    overflow-x: hidden !important;
}

/*hack to get rid of a padding on the popup*/
.mat-dialog-container{
     padding: 0px !important;
 }

Md-sidenavに水平スクロールバーが表示されている状況で、md-dialogのデフォルトのパディングを削除しました。

最もエレガントなソリューションではありませんが、これが役立つことを願っています。

これは、！importantとは何かを説明するStackOverflowの別の質問です。

CSSで！importantはどういう意味ですか？

9
KJR

Mat-dialog-containerなどのオーバーレイクラスのスタイルを変更する正しい方法は、 カスタマイズAngular Materialコンポーネントスタイル に従ってpanelClassを使用することです。

テーマのセットアップ後にこれをグローバルスタイルシートに追加します

.myapp-no-padding-dialog .mat-dialog-container {
  padding: 0;
}

以下を使用してダイアログを開きます

this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})
5
Florian Feldhaus

:: ng-deepは、私にとって魅力的です... scssとsassファイルに対して。

0
KRIPA SHANKAR JHA

このコードを追加してみてください。

.mat-dialog-container{
     padding: 0px !important;
}

これが機能しない場合は、使用できます

/deep/.className {
... your code goes here
}
0
Prashanth Damam