如何用SASS/SCSS自定义Blazor Server端Fluent UI组件样式？

完全可行。Blazor Server的Fluent UI基于Web Components实现，即便官方Design Tokens文档偏向React生态，我们也能通过SCSS变量结合CSS深层选择器，完全按照企业规范定制组件的颜色、尺寸、间距等样式，且满足SCSS编译要求。

实现步骤与示例 #

1. 基础准备 #

确保项目已安装Fluent UI Blazor包，新增SCSS文件（比如CustomFluentStyles.scss），并配置项目将SCSS编译为CSS（可通过NuGet包LibSassHost.AspNetCore或手动配置MSBuild编译任务实现）。

2. 定义企业规范变量 #

先把企业统一的设计参数封装成SCSS变量，方便全局维护：

// 企业设计规范变量
$brand-primary: #2563eb;
$brand-secondary: #475569;
$global-radius: 8px;
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$font-size-small: 14px;
$font-size-normal: 16px;

3. 穿透组件隔离覆盖样式 #

利用Blazor的::deep选择器穿透组件样式隔离，结合SCSS变量替换Fluent UI的默认CSS自定义属性（即设计令牌）：

// 自定义按钮样式
::deep .fluent-button {
    // 覆盖主题色
    --accent-fill-rest: $brand-primary;
    --accent-fill-hover: darken($brand-primary, 10%);
    --accent-fill-active: darken($brand-primary, 20%);
    // 覆盖圆角与间距
    --corner-radius: $global-radius;
    --font-size: $font-size-normal;
    padding: $spacing-sm $spacing-md;
}

// 自定义输入框样式
::deep .fluent-text-field {
    --neutral-stroke-rest: $brand-secondary;
    --neutral-stroke-hover: $brand-primary;
    --corner-radius: $global-radius;
    --font-size: $font-size-normal;
    padding: $spacing-sm;
}

// 自定义卡片样式
::deep .fluent-card {
    --corner-radius: $global-radius;
    padding: $spacing-md;
    margin-bottom: $spacing-md;
}

4. 全局引入样式 #

在_Host.cshtml中引入编译后的CSS文件：

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

5. 进阶：用SCSS混合宏复用样式 #

如果多个组件需要共享相同的样式规则，可定义SCSS混合宏减少重复代码：

@mixin fluent-base-style {
    --corner-radius: $global-radius;
    --font-size: $font-size-normal;
    padding: $spacing-sm $spacing-md;
}

// 复用混合宏到按钮与切换按钮
::deep .fluent-button, ::deep .fluent-toggle-button {
    @include fluent-base-style;
    --accent-fill-rest: $brand-primary;
}

关键注意点 #

• 组件对应的CSS自定义属性（设计令牌）可通过浏览器开发者工具查看，找到组件样式中以--开头的属性即可覆盖。
• 所有样式值尽量通过SCSS变量管理，后续企业规范调整时只需修改变量，无需逐个组件修改。
• 必须使用::deep选择器，否则Blazor的组件样式隔离会阻止自定义样式生效。

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