.NET Maui Blazor Hybrid动态生成{Appname}.Styles.css的来源与自定义问题

生成来源 #

• 该动态样式表由.NET Maui Blazor Hybrid框架自动聚合生成，核心来源包括：
  • 项目内所有.razor组件中通过<style>标签定义的内嵌样式
  • 引用的Razor类库中组件的内嵌样式
  • 框架自带的Blazor、Maui基础样式

框架会在构建或运行阶段，将这些分散的样式片段合并为统一的动态样式表，以[应用名].styles.css的形式注入到Blazor WebView中，因此项目文件系统中不存在物理文件，仅能在开发者工具中查看合并后的内容。

自定义内容的方法 #

1. 组件内嵌样式覆盖 #

直接在.razor组件中通过<style>标签编写样式，框架会自动将其合并到动态样式表中，优先级高于框架默认样式：

@page "/"

<h1>Hello, Maui Blazor!</h1>

<style>
    h1 {
        color: #2c3e50;
        font-size: 2rem;
    }
</style>

2. 引入全局静态样式表 #

在项目wwwroot/css目录下创建自定义全局样式文件（如custom.css），然后在_Host.cshtml或index.html中通过<link>标签引入，与动态样式表共同生效，可用于全局样式覆盖：

<link href="css/custom.css" rel="stylesheet" />

3. 覆盖框架样式变量 #

通过定义CSS变量修改框架基础样式，在全局样式文件中添加如下内容即可替换默认值：

:root {
    --bs-primary: #your-custom-color;
    --maui-primary: #your-custom-color;
}

注意事项 #

• 不要直接修改开发者工具中看到的动态样式表内容，每次构建或运行都会重新生成，修改不会被保存
• 若要查找对应样式的来源，可直接搜索项目内各.razor组件中的内嵌样式片段

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