css 根据内部的子组件，对父组件的不同示例设置不同的样式

goucqfw6 于 2023-01-06 发布在其他

关注(0)|答案(2)|浏览(338)

我有一个组件，它同时有几个打开的示例，每个示例里面都有另一个组件（它是模态的组件 Package 器），我希望每个模态示例有不同的大小。我如何设置每个组件示例将有不同的样式？？而我只能从子示例设置它？
对于一种模态：

:host ::ng-deep {
  .modal-dialog {
    width:300px;
  }
}

另一方面

:host ::ng-deep {
    .modal-dialog {
      width:600px;
      background:none;
      padding:2px;
    }
}

css

来源：https://stackoverflow.com/questions/74991892/style-differnt-instances-of-parent-component-differently-according-to-child-insi

2条答案

按热度按时间

5lhxktic1#

对于完整的浏览器支持，CSS不能向上，只能向下。
这意味着子组件不能限制其父组件的CSS。
但是你可以做的是，只给予你的 Package 器一个最小的宽度（比如300px）。宽度应该保持自动。（如果你需要的话，你也可以给它一个最大的宽度）。
然后，该 Package 器的子 Package 器应该有自己的大小。这样，宽度为auto的 Package 器应该自动适应其子 Package 器的大小。

赞(0）回复(0）举报 2023-01-06

yxyvkwin2#

最好的办法是为每个子组件指定一个特定的类，然后可以在父组件上使用:has()伪类

.modal-dialog {
  height: 100px;
  border: 1px solid red;
  padding: 2px;
}

.modal-dialog:has(.width1) {
  width: 100px;
}

.modal-dialog:has(.width2) {
  width: 200px;
}

<div class="modal-dialog">
  <div class="width1"></div>
</div>
<div class="modal-dialog">
  <div class="width2"></div>
</div>

赞(0）回复(0）举报 2023-01-06

我来回答

css 根据内部的子组件，对父组件的不同示例设置不同的样式

2条答案

相关问题

热门标签

最新问答