我试图使用角度材料和flex css在角度2中创建一个简单的布局 .
以下是我的代码......
<div class="background" >
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between none" >
<div fxLayout="column" >
<p>SPACE STUDY</p>
<h6>Rockefeller FY 2018</h6>
<div fxShow="true" fxHide.gt-sm="true" fxLayout="column" fxLayoutAlign="start none">
<h6 [matMenuTriggerFor]="dashboarditems">
<mat-icon style="transform: scale(1.2);">line_weight</mat-icon> </h6>
<mat-menu class="mat-menu-panel" [overlapTrigger]="true" #dashboarditems="matMenu">
<a routerLink='/home' routerLinkActive='active'>
<span matTooltip="HOME"><mat-icon style="color:lightgreen;">home</mat-icon></span></a>
<a >
<span matTooltip="SPACE SURVEY"><mat-icon style="color:deeppink;">explore</mat-icon></span></a>
<a >
<span matTooltip="SPACE ADMIN"><mat-icon style="color:lightblue;">account_circle</mat-icon></span></a>
<a >
<span matTooltip="REPORTS"><mat-icon style="color: orange;">assignment</mat-icon></span></a>
<a >
<span matTooltip="JOINT USE"><mat-icon style="color:yellow;">supervisor_account</mat-icon></span></a>
<a >
<span matTooltip="HELP"><mat-icon style="color:red;">help</mat-icon></span></a>
</mat-menu>
</div>
</div>
<div fxLayout="row" fxShow="true" fxHide.lt-md="true" >
<button mat-raised-button routerLink='/home' routerLinkActive='active'>
<span matTooltip="HOME"><mat-icon style="color:lightgreen;">home</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="SPACE SURVEY"><mat-icon style="color:deeppink;">explore</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="SPACE ADMIN"><mat-icon style="color:lightblue;">account_circle</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="REPORTS"><mat-icon style="color: orange;">assignment</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="JOINT USE"><mat-icon style="color:yellow;">supervisor_account</mat-icon></span></button>
<button mat-raised-button >
<span matTooltip="HELP"><mat-icon style="color:red;">help</mat-icon></span></button>
</div>
</mat-toolbar>
</div>
<style>
.background {
/* Remember to use the other versions for IE 10 and older browsers! */
display: flex;
min-height: 100%;
font-family: 'verdana', sans-serif;
color: #fff;
height:100vh;
background: #222222;
background: #16222A; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #16222A , #3A6073); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #16222A , #3A6073); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
p{
font-size:20px;
font-weight:bold;
font-family: 'verdana', sans-serif;
margin:3px;
}
h6{
font-size:12px;
font-weight:bold;
font-family: 'verdana', sans-serif;
}
.mat-raised-button{
text-align:left;
border-radius:10px;
font-size:11px;
font-weight:bold;
font-family: 'verdana', sans-serif;
color:white;
background:transparent;
}
.mat-icon {
transform: scale(1.5);
}
.matTooltip{
font-size:11px;
font-weight:bold;
font-family: 'verdana', sans-serif;
}
.mat-menu-panel {
min-width: 35px;
max-width: 280px;
overflow: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 48px);
border-radius: 2px;
outline: 0;
background: transparent;
padding-left: 10px;
}
</style>
这是我的输出
在这里,我试图将mat-menu容器的背景颜色更改为透明,并设置其他一些样式 .
当我在控制台中更改时,它会被反射回来,如下所示
但是,当我在代码中应用相同的更改时,样式未应用 .
我还尝试在组件和我添加mat菜单的div中明确添加class =“mat-menu-panel” .
但仍然没有应用样式..
任何人都可以帮我修理这个样式..
请在这里访问我的示例代码.. https://stackblitz.com/edit/angular-mat-formfield-flex-layout-vc3fsj?file=app%2Fapp.component.html
2 回答
您的html模板中不能包含样式 . 您需要将它们放在单独的样式表中 . 完成后,由于angular的默认样式封装,它可能不适用于样式材质组件 .
您可以
set the styles to global styles.css file
style.css文件
use the ng-deep combinator
将样式放在特定于组件的样式表中
Component.css
Change the component' s encapsulation
将样式放在特定于组件的样式表中,然后更改组件的代码
Component.ts
使用最后一个,样式将泄漏到整个应用程序(如全局样式表)
你可以检查一下我在styles.scss中写了一些CSS样式.scss https://stackblitz.com/edit/angular-mat-formfield-flex-layout-lvns7f?file=styles.scss