如何在AngularDart中使用角度组件的App布局更改标题颜色
问题描述:
如何在AngularDart项目中使用角度组件的应用布局更改背景颜色。我尝试过,但没有影响背景蓝色。 如何在AngularDart中使用角度组件的App布局更改标题颜色
layout_component.html
<header class="material-header shadow">
<div class="material-header-row">
<material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
<material-icon icon="menu"></material-icon>
</material-button>
<span class="material-header-title">Mobile Layout</span>
<div class="material-spacer"></div>
<nav class="material-navigation">
<material-button class="material-drawer-button" icon (trigger)="">
<material-icon icon="favorite"></material-icon>
</material-button>
</nav>
<nav class="material-navigation">
<material-button class="material-drawer-button"
icon
popupSource
#source="popupSource"
(trigger)="basicPopupVisible = !basicPopupVisible">
<material-icon icon="more_vert"></material-icon>
</material-button>
<material-popup defaultPopupSizeProvider
enforceSpaceConstraints
[source]="source"
[(visible)]="basicPopupVisible">
<div class="basic">
Hello, I am a pop up!
</div>
</material-popup>
</nav>
<nav class="material-navigation">
<div href="#AppLayout">SIGN IN</div>
</nav>
</div>
layout_component.css
.material-header-row {
background-color: black;
}
.basic {
height: 200px;
padding: 16px;
}
谢谢
答
如果您的样式添加到一个括号t分量(AppComponent
),可以使用::ng-deep
通过组件形式封装的界限刺穿(从父母到子女)
::ng-deep header.material-header {
background-color: black;
}
或者用你的代码示例
::ng-deep .material-header-row {
background-color: black;
}
更新
对于上面的选择器,特异性不足以覆盖背景颜色。
这为我工作:
::ng-deep header.material-header.material-header {
background-color: black;
}
如果添加样式index.html
,不需要::ng-deep
。
Angular会重写添加到组件的样式选择器,以匹配类似class="_ngcontent-qbq-3"
的类,以便与每个组件(每个组件具有不同的编号)相匹配以强制样式封装。
添加到index.html
的样式不会被重写,并且这些类将被忽略。
您可能还需要::ng-deep
为HTML添加[innerHTML]="..."
或someElement.append(...)
因为HTML添加这种方式并没有得到补充类和CSS选择器添加到组件将因此不重写后一致了。
我该如何解决这个未知的伪选择器'ng-deep' –
你是什么意思与“修复”或“未知”? –
而在css中使用它我得到这是一个错误 –