Question

我试图覆盖Angular Material中snackbar组件的默认最大宽度。

Angular Material应用的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;
 }

我找到了similar question的答案，但我知道该问题的答案现已弃用（/ deep /已弃用）。

是否有最佳实践解决方案？

Answer 1

要正确执行此操作，您需要在组件上将View Encapsulation设置为None：

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

然后在你的组件css中你可以这样做：

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

来自官方文档：

View Encapsulation = None表示Angular没有视图封装。 Angular将CSS添加到全局样式中。范围界定前面讨论的规则，隔离和保护不适用。这个与将组件的样式粘贴到其中的基本相同 HTML。

Answer 2

已通过 @ angular / material v7.0.x 的验证：

CSS ！重要的修饰符可以解决问题。

将其放置为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;
}

Answer 3

将CSS放入您的styles.scss或styles.css

.snackbar {
    max-width: 90% !important;
    margin-left: auto !important; // center align from left
    margin-right: auto !important; // center align from right
    margin-bottom: 1rem !important; 
    padding: 10px !important; // spacing between the text and boundary
    background-color: #0b8357;
    color: #f7f0cf;

    .mat-button-wrapper {
        color: black !important; // action text color
    }
}

注意：请确保为每种样式都设置了!important，没有样式就无法使用。

在component.ts

中

this.snackbar.open(this.resMsg.message, 'OK', {
    panelClass: 'snackbar'
})

Answer 4

自2019年6月30日起，将Angular Material 8.0.1与Angular 8.0.3结合使用，以下SCSS和打字稿似乎可以覆盖Angular Material小吃栏中 *的操作按钮的颜色，而无需使用！重要* ：

styles.scss（持续时间不是很长，这使我可以在样式消失之前对其进行检查）：

class TracksActivity: AppCompatActivity(), TracksView {

    private var albumsAdapter: AlbumsAdapter? = null

    override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
        super.onCreate(savedInstanceState, persistentState)
        setContentView(R.layout.activity_tracks)

        //albumsAdapter = findViewById(R.id.trackslist_recycleview)
        val msg = intent.getStringExtra("dd")
        Log.d("dd", "${msg}")
    }
}

app.module.ts：

$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;
        }
    }
}

Answer 5

要走的路。


encapsulation: ViewEncapsulation.None

这里有一个stackblick来演示

Answer 6

Angular 10，没有特殊技巧：

打开快餐栏时使用panelClass，例如：

this.snackBar.open("VeryLongTextWithoutThePossibilityOfBreakingAutomatically", "X", {
    duration: 0,
    panelClass: 'notif-error'
});

持续时间：0仅用于调试。

将此内容写入您的style.css

.notif-error {
    background-color: red;
}
.mat-snack-bar-container.notif-error {
    max-width: 100%;
}

现在由于css的特殊性，这将是最具体的规则。

请注意，.mat-snack-bar-container和.notif-error之间不应留有空格。
此规则将应用于同时具有.mat-snack-bar-container和.notif-error类的元素。
当您的.notif-error类为空时，此方法也适用。

Answer 7

在大屏幕和小屏幕上使用 vw 都适合我

    .mat-snack-bar-container {
    margin-right: auto !important;
    margin-left: auto !important;
    width: 80vw !important;
    max-width: 100vw !important;
}

角度材质覆盖SnackBar组件的默认样式

7 个答案: