用途:为 Syncfusion Blazor 组件应用和自定义主题,覆盖内置主题选用、Theme Studio 交互式配色、SCSS 覆盖与生产环境最佳实践。
主要能力:应用内置主题(Material 3、Bootstrap 5、Fluent/Fluent 2、Tailwind CSS、Bootstrap 4、Material、High Contrast);用 Theme Studio 实时预览并自定义颜色;按实际使用的组件过滤生成精简 CSS 包;通过 Sass @use 与 CSS 自定义属性覆盖主题变量;使用轻量主题变体(如 fluent2-lite.css,不含 Web 字体,适合离线或带宽受限环境);导入并复用已保存的 settings.json。
使用方式:Blazor Web App(.NET 8+)在 ~/Components/App.razor 的 <head> 添加 <link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />;Blazor WebAssembly 独立模式在 wwwroot/index.html 的 <head> 添加同一引用。Theme Studio 流程:打开 Blazor Theme Studio,选基础主题并调色,过滤组件,下载含 .css、.scss、settings.json 的包,将 CSS 放入 ~/wwwroot/styles/ 并在宿主页引用,settings.json 纳入版本控制。SCSS 覆盖示例:在 Custom.scss 中定义 :root { --color-primary-override: 54, 34, 89; },再用 @use 'material3.scss' with ($primary: var(#{--color-primary-override}));。
限制与注意:同一时间只引用一个 Syncfusion 基础主题,避免样式冲突。初始 Blazor 项目搭建、脚本加载与 CRG 包请用 syncfusion-blazor-common;样式表 CSP 配置请用 syncfusion-blazor-security。资料未提供具体版本兼容范围、收费或许可细节。