无法导入Materialize CSS JS反应 [英] Can't import Materialize CSS JS react
问题描述
大家早上好
我一直在努力使物化CSS可以在我的react-app(特别是Javascript文件)上运行.
I've been struggling to get materialize css to work on my react-app, specifically, the Javascript files.
我已经尝试了多种方法,但这是我认为已经走得更远的一种方法.
I've tried multiple ways, but this is the one I think i've gotten farther.
在我的"landingpage.js"文件中:
In my 'landingpage.js' file:
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是否正确导入)
The objective is to open a simple popup (so I can test if the JS is being imported correctly)
<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();
}
当我单击按钮时,它应该会打开一个弹出窗口,
When I click the button, it's supposed to open a popup, however:
ReferenceError: Component is not defined
我尝试导入的JS文件上发生此错误.
This error occurs on the JS file i'm trying to import.
我尝试以多种不同的方式导入,但该应用甚至无法识别任何内容.我一直在尝试将其导入两天并在网络上进行了大量搜索,我正在为学校最终"项目进行此操作,试图自我学习做出反应.
I tried importing in many different ways and the app would not even recognize anything. I've been trying to import this for two days and searched the web a lot, I'm doing this for a School Final project, trying to self learn react.
以下是我要导入的框架的链接:
Here's the link to the framework i'm trying to import:
https://materializecss.com/modals.html#!
谢谢您的时间.
推荐答案
您需要将npm模块的完整路径添加到入口点文件中,以使webpack能够利用CSS ...
You need to add your full path from npm module into your entry point file for webpack to utilize your css...
这是一个使用Index.js的典型create-react-app中的示例,或者如果您自己进行反应样板,则您会调用它.
here is an example in a typical create-react-app using Index.js or what ever your calling it if you are doing your own react boilerplate.
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组件
Once this is done your components will be able to have access to the css properties. I also recommend you install the npm i -S materialize-css@next
so you can use JS components without needing JQuery
这篇关于无法导入Materialize CSS JS反应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!