Angular 未在“角度”菜单中应用mat菜单样式

我正在尝试使用angular材质和flex css在angular 2中创建一个简单的布局

下面是我的代码。。。

空间研究

洛克菲勒2018财年
线重




在这里，我试图将mat菜单容器的背景色更改为透明，并设置一些其他样式

当我在控制台中更改时，它会反射回来，如下所示


但是，当我在代码中应用相同的更改时，没有应用样式

我还尝试在组件和添加mat菜单的div中显式添加class=“mat menu panel”

但是仍然没有应用这些样式

谁能帮我修一下这个款式

请访问我的示例代码
 html模板中不能有样式。您需要将它们放在单独的样式表中。完成此操作后，由于angular的默认样式封装，它可能无法用于设置材质组件的样式

你可以

将样式设置为global styles.css文件

Style.css

.mat-menu-panel {
min-width: 35px;

使用ng深度组合器

将样式放入特定于组件的样式表中

Component.css

:host ::ng-deep  .mat-menu-panel {
min-width: 35px;
/* ...*/

更改组件的封装

将样式放在特定于组件的样式表中，并更改组件的代码

组件技术

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

使用最后一个，样式将泄漏到整个应用程序（就像在全局样式表中）
您的html模板中不能有样式。您需要将它们放在单独的样式表中。完成此操作后，由于angular的默认样式封装，它可能无法用于设置材质组件的样式

你可以

将样式设置为global styles.css文件

Style.css

.mat-menu-panel {
min-width: 35px;

使用ng深度组合器

将样式放入特定于组件的样式表中

Component.css

:host ::ng-deep  .mat-menu-panel {
min-width: 35px;
/* ...*/

更改组件的封装

将样式放在特定于组件的样式表中，并更改组件的代码

组件技术

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

最后一个，样式将泄漏到整个应用程序中（就像在全局样式表中）
你能检查一下这个吗？我在styles.scss中写了一些css样式
你能检查一下这个吗？我在styles.scss中写了一些css样式
只要使用

::ng-deep.mat-menu-panel {}

请注意，您可以直接处理以下类.mat菜单项、.mat.menu-wrapper等
注意，您不应该在componenet.scss中的另一个css类中使用它们

::ng-deep.mat-menu-panel {}

请注意，您可以直接处理以下类.mat菜单项、.mat.menu-wrapper等
请注意，您不应该在componenet中的另一个css类中使用它们。scss
您的代码仍然存在漏洞，请修复stackblitz代码段无法运行的问题。您可以访问此链接吗…@Heena不确定如何使用不同的措辞，该链接不起作用。任何指向mat菜单的自定义样式最好在theme.scss文件中完成。在您的
style.scss
文件中，您已经为body添加了规则，请尝试在其中添加mat菜单样式。这是一个很好的资源，你的代码仍然有问题，请修复stackblitz代码段无法运行。你可以访问此链接吗…@Heena不知道如何用不同的方式表达此链接，该链接不起作用任何自定义样式到mat菜单最好在theme.scss文件中完成。在您的
style.scss
文件中，您已经为body添加了规则，请尝试在其中添加mat菜单样式。查看一个很好的资源是一个封装：ViewEncapsulation。一个都不是好主意。只需在类（.mat菜单项，.mat菜单包装器等）上直接应用css样式。注意，您已经可以执行以下操作：：ng-deep.mat-menu-panel{…}封装：ViewEncapsulation.None不是一个好主意，只需在类（.mat菜单项、.mat菜单包装等）上直接应用css样式。注意，您已经可以执行以下操作：：ng-deep.mat-menu-panel{…}