css 如何设置样式：基于直接父代的主机？

4xrmg8kj 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(120)

我有一个定制的组件<ui-title>，我希望根据它的直接父元素设置不同的样式。
例如，如果它出现在<ui-section>中，则将其设置为YELLOW。如果它出现在<ui-card>中，则将其设置为BLUE。如果它出现在其他位置，则将其设置为绿色。
以下是我的尝试：

:host {
  background-color: green;
}

:host-context(ui-card) {
  background-color: blue;
}

:host-context(ui-section) {
  background-color: yellow;
}

这不起作用，因为如果一个元素同时嵌套在<ui-section>和<ui-card>中，两组样式都会被应用，我希望应用一组严格基于：host元素的直接父元素的样式。
这是一个StackBlitz，显示了我的问题。

css

来源：https://stackoverflow.com/questions/74805534/how-to-style-host-based-on-direct-parent

1条答案

按热度按时间

tjrkku2a1#

经过几个小时的搜索和尝试::ng-deep、:host和:host-context的不同组合后，我发现可以从这个answer合并:host和::ng-deep。
https://stackblitz.com/edit/angular-ivy-yf1uff?file=src/app/ui-title/ui-title.component.css
因此，只需将与ui-card和ui-section相关的样式移到它们自己的样式表中，并使用子选择器>合并:host和::ng-deep

用户界面卡组件css

:host > ::ng-deep ui-title {
  font-size: 10px;
  background-color: blue;
}

用户界面部分.组件. css

:host > ::ng-deep ui-title {
  background-color: yellow;
}

用户界面标题.组件. css

:host {
  display: block;
  padding: 5px;
  border-radius: 10px;
  background-color: green;
}

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何设置样式：基于直接父代的主机？

1条答案

用户界面卡组件css

用户界面部分.组件. css

用户界面标题.组件. css

相关问题

热门标签

最新问答