时间戳

首页 > 解决方案 > 如何在 Blazor CSS 隔离中使用多个范围？

c# - 如何在 Blazor CSS 隔离中使用多个范围？

问题描述

我对 Blazor CSS 隔离有疑问。我正在尝试使用自定义Flex.razor组件，该组件旨在使 CSSflex更好地工作。

这是我的Flex.razor课：

<div class=@_combinedClass
     style=@Style
     onclick=@OnClick
     title=@Title
     id=@Id>
     @ChildContent
</div>

涉及到一些代码隐藏，它接收所有 flex 选项（例如flex-wrap，justify-content作为 enum 参数。

我还应该注意我正在使用CSS Isolation. Flex.razor 有一个代表所有 flex 选项的 Flex.razor.less 类。

好的，所以这很好用。但是，一旦我尝试使用它，我就会遇到问题。例如，我有一个名为Images.razor. 该组件如下所示：

<Flex Class="ImagePageGrid">
<Flex Class="ImageList"
      Direction="FlexDirection.Column">
    @foreach (var imageInfo in _uploadedImages)
    {
        <ImageEntry ImageInfo=@imageInfo />
    }
...

ImagePageGridImages.razor.less是一种与隔离相关的风格。

手头的问题如下。似乎当我使用该组件时，Blazor 将使用 Flex-scope（我使用生成的 css 包和 chrome 开发工具验证了这一点），并忽略了实际组件Flex.razor的所有自定义类。Images.razor

有没有办法让两个组件都玩得很好？我正在尝试使用::deep修饰符进行很多尝试，但还没有成功

标签： c#blazor

解决方案

好的，看来我找到了解决方法：

看来我必须像这样包装我的组件

<div class="Container">
    <Flex Class="ImagePageGrid">
    <Flex Class="ImageList"
        Direction="FlexDirection.Column">
        @foreach (var imageInfo in _uploadedImages)
        {
             <ImageEntry ImageInfo=@imageInfo />
        }
    ...

并像这样将我所有的 css 包装在我的 Images.razor.less 文件中

.Container {
    :deep .ImagePageGrid {
        ....
    }
}

::deep 很重要，因为它将风格传播给孩子

然后 Blazor 将正确应用样式，如https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0#child-component-support中的注释所示. 感觉很笨重，但似乎就是这样

推荐阅读