FAST 和 BLAZOR - 如何使用 Blazor 更改 fluent-design-system-provider 的调色板答案

【问题标题】：FAST and BLAZOR - How to change the Color Palette of fluent-design-system-provider with BlazorFAST 和 BLAZOR - 如何使用 Blazor 更改 fluent-design-system-provider 的调色板
【发布时间】：2020-12-24 22:35:20
【问题描述】：

我正在使用 fluent-design-system-provider 评估新的 Microsoft fast.design https://www.fast.design/ 并尝试为 Blazor 项目自定义强调色，但没有运气...

这是我按照官方文档 (https://www.fast.design/docs/design-systems/fast-frame) 所做的：

在我的 asp.net 核心 Blazor 服务器项目的 _Host.cshtml

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title </title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="Test.Main.styles.css" rel="stylesheet" />
</head>

<body>
    <fluent-design-system-provider use-defaults>
        <component type="typeof(App)" render-mode="ServerPrerendered" />

        <div id="blazor-error-ui">
            <environment include="Staging,Production">
                An error has occurred. This application may no longer respond until reloaded.
            </environment>
            <environment include="Development">
                An unhandled exception has occurred. See browser dev tools for details.
            </environment>
            <a href="" class="reload">Reload</a>
            <a class="dismiss">????</a>
        </div>
    </fluent-design-system-provider>

    <script src="_framework/blazor.server.js"></script>
    <script type="module" src="https://unpkg.com/@@microsoft/fast-components"></script>
    <script type="module" src="https://unpkg.com/@@fluentui/web-components"></script>
    <script type="module" src="~/script/site.js"></script>
</body>
</html>

在我的 site.js 之后，我正在尝试生成和替换文档https://www.fast.design/docs/design-systems/fast-frame#generating-and-replacing-palettes

中提到的调色板

import { parseColorHexRGB } from "@microsoft/fast-colors";
import { createColorPalette } from "@microsoft/fast-components";

// Initialization
(function () {
    const palette = createColorPalette(parseColorHexRGB("#28EBD7"));
    const provider = document.querySelector("fluent-design-system-provider");

    // change the neutral color pallete
    provider.neutralPalette = palette;    
})();

我收到以下错误，未捕获的类型错误：无法解析模块说明符“@microsoft/fast-colors”。相对引用必须以“/”、“./”或“../”开头。

我该如何解决这个问题？

【问题讨论】：

标签： asp.net-core blazor fluent-ui

【解决方案1】：

据我所知，import 用于客户端应用程序（如 Angular、Teactjs），而不是 Asp.net Core Blazor。如果您正在创建一个客户端应用程序，您可以查看Fast Integrations。

要将 Fast 与 Asp.net Core Blazor 集成，请在安装 Fast 后使用以下命令：

npm install --save @microsoft/fast-components

您可以在以下位置找到单个文件脚本构建：

node_modules/@microsoft/fast-components/dist/fast-components.min.js

将其复制到您的wwwroot/script 文件夹并使用script 标记引用它，如上所述。 Razor 页面中的代码如下：

<script type="module" src="script/fast-components.min.js"></script>

更多详细信息，请参阅Fast Integrations for Asp.net Core Blazor。

【讨论】：

感谢@Zhi，但我已经按照上述步骤使用

【解决方案2】：

我错过了添加流畅组件js文件的完整路径，引用正确的路径效果很好！

import { neutralLayerL1Behavior, parseColorString } from "https://unpkg.com/@fluentui/web-components";
import { createColorPalette } from "https://unpkg.com/@microsoft/fast-components";    


export function initDesignSystemProvider() {

    const designSystemProvider = document.querySelector("fluent-design-system-provider");       

    var accentBaseColor = "#204320";
    const accentPalette = createColorPalette(parseColorString(accentBaseColor));
    designSystemProvider.accentBaseColor = accentBaseColor;
    designSystemProvider.accentPalette = accentPalette;             
 
}

【讨论】：