web-dev-qa-db-ja.com

Angular SnackBarコンポーネントのデフォルトスタイルをオーバーライドするマテリアル

Angular Materialの snackbar コンポーネントのデフォルトの最大幅を上書きしようとしています。

Angularマテリアルによって適用されるCSSは以下に示されています：

.mat-snack-bar-container {
    border-radius: 2px;
    box-sizing: border-box;
    display: block;
    margin: 24px;
    max-width: 568px;
    min-width: 288px;
    padding: 14px 24px;
    transform: translateY(100%) translateY(24px);
}

私は自分のstyle.cssファイルで同じスタイルを使用してオーバーライドしようとしましたが、このスタイルはデフォルトのスタイルでオーバーライドされています。

 .mat-snack-bar-container {
   max-width: 800px;
 }

同様の質問 への回答を見つけましたが、その質問への回答が非推奨になったことを知っています（/ deep /は非推奨です）。

これに対するベストプラクティスソリューションはありますか？

cssangularangular-material2
12
Tony Scialo

これを適切に行うには、コンポーネントのView EncapsulationをNoneに設定する必要があります。

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

次に、コンポーネントのCSSでこれを行うことができます：

.mat-snack-bar-container {
   max-width: 800px;
}

公式ドキュメントから：

ビューのカプセル化=なしは、Angularはビューのカプセル化を行わないことを意味します。Angularは、CSSをグローバルスタイルに追加します。前述のスコープルール、分離、保護は、これは適用されません。これは基本的に、コンポーネントのスタイルをHTMLに貼り付けることと同じです。

5
Andrei Matracaru

検証済み@ angular/material v7.0.x：

CSS ！important modifierがうまくいきます。

これはsrc/styles.scss（アプリのグローバルcss）です：

.mat-snack-bar-container {
  max-width: 100% !important;
}

また、そのフォントを微調整します：

/* Overrides SnackBar CSS in Material Design's .mat-simple-snackbar class */
/* Original sizes: font: 24px, height: 47.952px */ 
.mat-simple-snackbar {
  display: flex; 
  font-size: 28px !important; // 28px  is double, 42px for triple
  min-height: 70px !important; // 70px for double, 90px for triple
  align-items: center !important;
  justify-content: center !important;
}
0
Paul Lockwood

行く方法。


encapsulation: ViewEncapsulation.None

ここに stackblick を示します

0
Deunz

2019年6月30日現在、Angular Material 8.0.1 with Angular 8.0.3を使用すると、次のSCSSおよびTypeScriptがAngular Materialスナックバーのアクションボタン*！を使用せずに*：

styles.scss（非常に長い期間ではなく、スタイリングが消える前にスタイルを調べることができました）：

$snackBarTextColor: white;
$snackBarBackgroundNormal: #087a51;
$snackBarActionColor: lightgray;
.snackBarInfo {
    background-color: $snackBarBackgroundNormal;
    color: $snackBarTextColor;


}
.mat-simple-snackbar > span {
    font-weight: bold;
}
.mat-simple-snackbar-action {
    .mat-button {
        .mat-button-wrapper {
            color: $snackBarActionColor;
        }
    }
}

app.module.ts：

import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
providers: [
        {
            provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
            useValue: {
                duration: 41000,
                horizontalPosition: 'center',
                verticalPosition: 'bottom',
                panelClass: 'snackBarInfo'
            }
        }
    ]
0
user3785010