無法導入Materialize CSS JS反應

Question

大家，早安，

我一直在努力使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#!

感謝您的時間。

Answer 1

您需要將npm模塊的完整路徑添加到webpack的入口點文件中，以利用CSS。

這是一個使用Index.js的典型create-react-app應用程序中的示例，或者如果您正在執行自己的反應樣板，則您會調用它。

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以便無需jQuery即可使用JS組件。

Answer 2

如果您嘗試使用材料，那么完全不建議將jquery與react一起使用

material-ui通過使用進行安裝

npm i material-ui --save 

您可以在此處按照對話框的示例進行操作，該對話框基本上是材料ui中的模式對話框