无法导入 Materialise CSS JS 反应

大家，早安，

我一直在努力让具体化CSS在我的react-app上工作，特别是Javascript文件。

我尝试了多种方法，但这是我认为我已经走得更远的一种。

在我的“landingpage.js”文件中：

import React, { Component } from 'react';
import './styles/css/custom.css';
import $ from 'jquery';
import 'materialize-css'; // It installs the JS asset only
import '../node_modules/materialize-css/js/modal';

目标是打开一个简单的弹出窗口（这样我可以测试 JS 是否正确导入）

            <div>
            <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
            <div id="modal1" class="modal">
                <div class="modal-content">
                <h4>Modal Header</h4>
                <p>A bunch of text</p>
                </div>
                <div class="modal-footer">
                <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
                </div>
            </div>    
        </div>

因此，一旦组件安装：

   componentDidMount() {
    $('.modal').modal();
}

当我单击该按钮时，它应该打开一个弹出窗口，但是：

ReferenceError: Component is not defined

我尝试导入的 JS 文件上发生此错误。

我尝试以多种不同的方式导入，但应用程序甚至无法识别任何内容。我已经尝试导入这个两天了，并在网上搜索了很多，我正在为学校期末项目做这个，试图自学反应。

这是我尝试导入的框架的链接：

https://materializecss.com/modals.html#!

感谢您的时间。

您需要将 npm 模块的完整路径添加到 webpack 的入口点文件中才能利用您的 css ...

这是使用 Index.js 的典型 create-react-app 的示例，或者如果您正在做自己的 React 样板，则可以调用它。

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'materialize-css/dist/css/materialize.min.css'; // <---

import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

完成此操作后，您的组件将能够访问 css 属性。我还建议您安装npm i -S materialize-css@next这样你就可以使用 JS 组件而不需要 JQuery