Question

我对此有很多麻烦，而且明显的解决方案不起作用或者我做错了（可能是后者）。

我想设置> dput(df) structure(list(`rock_sandstone conglomerate coquina tephra` = c(0, 41.9683095321332, 32.8040311360418, 8.66943642122745, 32.9373770476129 ), `rock_sandstone mudstone basalt chert limestone` = c(18.7740373237074, 30.2765089609693, 0, 3.09206176664796, 19.8947759845006)), row.names = c(NA, -5L), class = c("tbl_df", "tbl", "data.frame"), .Names = c("rock_sandstone conglomerate coquina tephra", "rock_sandstone mudstone basalt chert limestone"))和mat-menu的样式，我尝试过这样做：

mat-menu-item

但它不起作用，我的菜单看起来像这样（没有任何变形）

::ng-deep .mat-menu{
  background-color:red;
}

我也尝试过/深/但我知道这应该不起作用，实际上应该在Angular 4中贬值，但我做了它来测试，我不知道如何在这一点上设置元素的样式。

Answer 1

<强> app.component.ts

import { Component, ViewEncapsulation ... } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  constructor() { }
}

<强> my.component.css

.mat-menu-content {
    background-color: 'red' !important;
}

我通常使用它来设置高度和溢出css的样式，但一般的想法应该仍然代表背景颜色。请注意，可能有其他具有背景颜色的重叠div，但您应该能够通过.mat-menu-<item name> css以这种方式访问它们，并以相同的方式更改子项。

Answer 2

更简便的方法 如果您只想更改组件而不影响其他组件，则应在菜单中添加一个类。


export module FetchModule {
  export async function fetch(obj: any) {
    let url = obj.url;
    let type = obj.type ? obj.type.toUpperCase() : "GET";
    let options: any = {};
    options.method = type;
    let idToken = obj.token;// Want to retrieve this USER_TOKEN from react's context API 
    if (idToken) {
      options.headers["USER_TOKEN"] = idToken;
    }
    options.headers = { ...options.headers, ...obj.headers };
    const response = await fetch(url, options);
    return await response.json();
  }
}

然后使用:: ng-deep设置菜单样式。

<mat-menu #infoMenu="matMenu" class="customize"></mat-menu>

瞧！您的自定义设置不会影响其他组件。

另一种方式： 您可以将backgroundClass添加到菜单。

::ng-deep .customize {
  background: red;
}

然后在您的styles.css中用+ *添加CSS样式类

 <mat-menu #infoMenu="matMenu" backdropClass="customize"></mat-menu>

这也可以在不影响其他人的情况下完成，但是在styles中添加css可能有点不方便。

Answer 3

我使用mat-menu自定义了角形材料元素::ng-deep

<mat-menu #createPlan="matMenu" class="custom-menu">
    <button mat-menu-item [matMenuTriggerFor]="profilestypes">Client Profile</button>
          <button mat-menu-item>Supplier Profile</button>
    <button mat-menu-item>Advisor Profile</button>
</mat-menu>

css类如下

::ng-deep .custom-menu{
  margin-top: 15px;
}

它适用于mat-menu的每个内部类

Answer 4

另一种解决方案，它 (1) 允许我们保留默认的 ViewEncapsulation 并且 (2) 不需要弃用的 ::ng-deep

app.component.html

<mat-menu #infoMenu="matMenu" class="my-class">...

然后在您的全局样式表中

styles.css

.mat-menu-panel.my-class {
  background-color: red;
}

此解决方案在 Angular/Components git 存储库中提供：https://github.com/angular/components/issues/16742

该解决方案的原作者在这里提供了一个堆栈闪电战：https://stackblitz.com/edit/angular-y3jqzt

设置菜单样式

4 个答案: