如何配置ASP.NET Core 7 Identity使用Blazor内置主题？

1. 替换Identity页面的布局文件 #

找到项目中的Areas/Identity/Pages/_Layout.cshtml，将其内容替换为与Blazor主布局（Shared/MainLayout.razor）一致的结构与资源引用：

• 保留<base href="~/" />确保资源路径正确
• 引用项目根目录下的css/bootstrap/bootstrap.min.css和css/site.css（替换Identity默认的lib目录下的Bootstrap引用）
• 添加Blazor框架的JavaScript引用（根据项目类型选择_framework/blazor.server.js或_framework/blazor.webassembly.js）
• 复制主布局中的导航栏、页脚等结构，保持页面框架一致

示例修改后的_Layout.cshtml核心代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MyApp</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="css/site.css" />
</head>
<body>
    <!-- 复制MainLayout中的导航栏结构 -->
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">MyApp</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                    </ul>
                    <partial name="_LoginPartial" />
                </div>
            </div>
        </nav>
    </header>

    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2024 - MyApp - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="_framework/blazor.server.js"></script>
    <script src="js/site.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

2. 统一表单元素样式 #

如果Identity页面的表单组件（输入框、按钮等）样式仍不一致，检查wwwroot/css/site.css中的自定义样式，确保.form-control、.btn等通用类的样式覆盖了Identity默认样式。例如：

/* 自定义按钮样式，与Blazor主题统一 */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
}

/* 自定义输入框样式 */
.form-control {
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
}

3. 移除冗余资源引用 #

删除Identity布局中自带的多余资源（如旧版Bootstrap引用、未使用的jQuery脚本），避免样式冲突。

完成以上步骤后，Identity页面的样式会和"Hello world!"页面完全统一，包括布局、配色、组件样式等。

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