c# - Materialize CSS 示例在 Blazor WASM 中不起作用

Question

我正在尝试将 CSS 的物化框架与 Blazor 应用程序一起使用，但是，当我将一些示例复制/粘贴到布局、组件等中时，我没有得到什么 Materialize在示例中显示。开发工具中没有任何可识别的 CSS/JS 加载或控制台错误，但似乎有些东西没有加载，因为许多组件没有正常工作，如示例所示。

例如，显示在事件选项卡下并在您选择一个选项卡时从一个选项卡跳到另一个选项卡的选项卡指示器。

布局页面:

@inherits LayoutComponentBase

<div class="main">
    <nav class="nav-extended">
        <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">JavaScript</a></li>
        </ul>
        </div>
        <div class="nav-content">
        <ul class="tabs tabs-transparent">
            <li class="tab"><a href="#test1">Test 1</a></li>
            <li class="tab"><a class="" href="#test2">Test 2</a></li>
            <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
            <li class="tab"><a href="#test4">Test 4</a></li>
        </ul>
        </div>
    </nav>

    <div class="content px-4">
        @Body
    </div>
</div>

编辑

看起来 M.AutoInit() 没有正常启动。有人可以指出调用该函数的最佳位置在哪里吗？我试了一个

document.onload = M.AutoInit();

在 index.html 页面和我的组件上的互操作 JS

@code {
    ...
    protected override void OnInitialized()
    {
        JSRuntime.Invoke<string>("M.AutoInit");
    }
    ...
}

都没有用，但也许我在 JSInterop 上做错了，在文档中找不到与我正在尝试做的类似的明确示例。任何建议或指示都会很棒!

Answer 1

这对我有用(非常重要的尊重异步等待，所以如果你有任何错误，异常会正确地抛出到你的浏览器控制台)

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    
    await base.OnAfterRenderAsync(firstRender);
    if (firstRender)
    {

        await JSRuntime.InvokeVoidAsync("M.AutoInit");

    }
}