C# 具体化CSS示例在Blazor WASM中不起作用

我试图在Blazor应用程序中使用css的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>

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

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

@code{
...
受保护的覆盖无效OnInitialized（）
{
JSRuntime.Invoke（“M.AutoInit”）；
}
...
}

两者都不起作用，但也许我在JSInterop中做得不对，在文档中找不到一个明确的例子，类似于我正在尝试做的。任何建议或指点都会很好

这对我来说很有效（异步等待非常重要，因此如果您有任何错误，则会将异常适当地发送到您的浏览器控制台）

---

在用于初始化materialize元素的静态JavaScript文件中，添加

AutoInit

方法以首先在

DOMContentLoaded

事件侦听器上加载

考虑这个初始化

物化Sidenav

的示例：

在侧导航剃须刀中：

<nav> <!-- navbar content here  -optional  --> </nav>

<ul id="slide-out" class="sidenav">
    <li>
        <div class="user-view">
            <div class="background">
                <img width="300" src="office.jpg">
            </div>
            <a href="#user">
                <img class="circle" width="50"
                     src="user_female.svg.png">
            </a>
            <a href="#name"><span class="white-text name">John Doe</span></a>
            <a href="#email"><span class="white-text email">xyz@xyz.com</span></a>
        </div>
    </li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Sub-header</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

(function () {
    "use strict";

    var M = window.M || globalThis.M;

    function activateSideNav() {
        var elems = document.querySelectorAll('.sidenav');
        var options = {};
        M.Sidenav.init(elems, options);
    }

    document.addEventListener('DOMContentLoaded', function () {
        M.AutoInit();
        setTimeout(activateSideNav, 864);
    });

})();

<Sidenav />
<div class="row">
    <div class="col s12 m12 l12 xl12">
        @Body
    </div>
</div>

主布局中的。razor:

<nav> <!-- navbar content here  -optional  --> </nav>

<ul id="slide-out" class="sidenav">
    <li>
        <div class="user-view">
            <div class="background">
                <img width="300" src="office.jpg">
            </div>
            <a href="#user">
                <img class="circle" width="50"
                     src="user_female.svg.png">
            </a>
            <a href="#name"><span class="white-text name">John Doe</span></a>
            <a href="#email"><span class="white-text email">xyz@xyz.com</span></a>
        </div>
    </li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Sub-header</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

(function () {
    "use strict";

    var M = window.M || globalThis.M;

    function activateSideNav() {
        var elems = document.querySelectorAll('.sidenav');
        var options = {};
        M.Sidenav.init(elems, options);
    }

    document.addEventListener('DOMContentLoaded', function () {
        M.AutoInit();
        setTimeout(activateSideNav, 864);
    });

})();

<Sidenav />
<div class="row">
    <div class="col s12 m12 l12 xl12">
        @Body
    </div>
</div>

---

你知道吗？@Flores我知道，我试图避免使用一个库来获得更多使用组件的实践方法。这是一个很好的库。这看起来像是一个微不足道的检查，但您是否在

\u host.cshtml

文件中添加了源代码？@Hoshani不，这是一个WASM项目。我不认为你可以使用_host.cshtml，除非它是一个服务器。index.html确实添加了源代码。