如何让.NET 6 Blazor自定义Razor组件携带b-k6xksvc12j属性？

首先明确：b-k6xksvc12j=""是Blazor CSS隔离的作用域标识符，由当前项目编译时自动生成，用于确保scoped样式仅作用于当前项目的元素。跨项目引用的自定义组件默认不会携带当前项目的作用域属性，因此无法匹配现有样式规则，以下是可行解决方案：

方案一：手动添加作用域属性 #

直接在引用组件时写入当前项目的作用域属性：

@{ 
    var Features = UISupportGeneric.Util.GetAllClassInfoInNamespace("Cloud.Features", System.Reflection.Assembly.GetExecutingAssembly());
}
<UISupportRazor.Menu ClassesInfo="@Features" b-k6xksvc12j=""></UISupportRazor.Menu>

注意：该标识符（k6xksvc12j）会在项目重建、清理或修改scoped CSS文件时变化，需同步更新。

若要避免硬编码，可通过代码动态获取作用域ID：

1. 创建工具类读取编译生成的作用域标识：

using System.Reflection;
using System.Text.RegularExpressions;

public static class ScopedCssHelper
{
    public static string GetCurrentScopedId()
    {
        var projectName = Assembly.GetExecutingAssembly().GetName().Name;
        var bundlePath = Path.Combine(AppContext.BaseDirectory, "obj", "Debug", "net6.0", "scopedcss", "bundle", $"{projectName}.bundle.scp.css");
        
        if (File.Exists(bundlePath))
        {
            var content = File.ReadAllText(bundlePath);
            var match = Regex.Match(content, @"\[b-([a-z0-9]+)\]");
            return match.Success ? match.Groups[1].Value : string.Empty;
        }
        return string.Empty;
    }
}

2. 在组件中动态使用：

@{ 
    var Features = UISupportGeneric.Util.GetAllClassInfoInNamespace("Cloud.Features", System.Reflection.Assembly.GetExecutingAssembly());
    var scopedId = ScopedCssHelper.GetCurrentScopedId();
}
@if (!string.IsNullOrEmpty(scopedId))
{
    <UISupportRazor.Menu ClassesInfo="@Features" @attributes=new Dictionary<string, object> { { $"b-{scopedId}", "" } }></UISupportRazor.Menu>
}
else
{
    <UISupportRazor.Menu ClassesInfo="@Features"></UISupportRazor.Menu>
}

方案二：修改自定义组件支持属性传递 #

若有权限修改UISupportRazor.Menu组件代码，可让它支持接收并传递额外属性：

1. 在自定义组件中添加AdditionalAttributes参数：

@* UISupportRazor.Menu组件代码 *@
@inherits ComponentBase

[Parameter] public List<ClassInfo> ClassesInfo { get; set; }
[Parameter(CaptureUnmatchedValues = true)]
public Dictionary<string, object> AdditionalAttributes { get; set; } = new();

<!-- 在组件根元素上绑定额外属性 -->
<div @attributes="AdditionalAttributes">
    <!-- 组件原有内容 -->
</div>

2. 回到当前项目引用组件时，直接传递作用域属性即可：

@{ 
    var Features = UISupportGeneric.Util.GetAllClassInfoInNamespace("Cloud.Features", System.Reflection.Assembly.GetExecutingAssembly());
}
<UISupportRazor.Menu ClassesInfo="@Features" b-k6xksvc12j=""></UISupportRazor.Menu>

方案三：调整样式规则不依赖作用域属性 #

通过:deep()伪类让当前项目的scoped样式穿透到跨项目组件：

/* 当前项目的scoped CSS文件 */
:deep(.menu-root-class) {
    /* 原有样式规则示例 */
    padding: 1rem;
    background-color: #f5f5f5;
}

需将.menu-root-class替换为UISupportRazor.Menu组件根元素的实际类名；也可直接将样式写入全局CSS文件（如wwwroot/css/app.css），无需依赖作用域属性。

内容的提问来源于stack exchange，提问作者user1654087