Good morning everyone,
大家早上好!
I've been struggling to get materialize css to work on my react-app, specifically, the Javascript files.
我一直在为实现css而努力,特别是Javascript文件。
I've tried multiple ways, but this is the one I think i've gotten farther.
我尝试了多种方法,但这是我认为我走得更远的方法。
In my 'landingpage.js' file:
在我的“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';
The objective is to open a simple popup (so I can test if the JS is being imported correctly)
目的是打开一个简单的弹出窗口(这样我可以测试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>
So, as soon as the component mounts:
因此,一旦组件安装:
componentDidMount() {
$('.modal').modal();
}
When I click the button, it's supposed to open a popup, however:
当我点击按钮时,它应该会弹出:
ReferenceError: Component is not defined
This error occurs on the JS file i'm trying to import.
这个错误发生在我要导入的JS文件上。
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#!
Thank you for your time.
谢谢您的时间。
2 个解决方案
#1
2
You need to add your full path from npm module into your entry point file for webpack to utilize your css...
您需要将npm模块的完整路径添加到您的入口点文件中,以便webpack使用您的css…
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
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'));
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
完成之后,您的组件将能够访问css属性。我还建议您安装npm I -S materialize-css@next,以便不需要JQuery就可以使用JS组件
#2
1
using jquery with react is not recommended at all if you trying to use material how about using a library like
如果您试图使用类似库的材料,那么完全不建议使用jquery和react
material-ui install it by using
材料-ui通过使用来安装
npm i material-ui --save
and you can follow the example here for dialog which is basically a modal dialog in material ui
你可以按照这里的例子进行对话它基本上是一个模态对话框
#1
2
You need to add your full path from npm module into your entry point file for webpack to utilize your css...
您需要将npm模块的完整路径添加到您的入口点文件中,以便webpack使用您的css…
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
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'));
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
完成之后,您的组件将能够访问css属性。我还建议您安装npm I -S materialize-css@next,以便不需要JQuery就可以使用JS组件
#2
1
using jquery with react is not recommended at all if you trying to use material how about using a library like
如果您试图使用类似库的材料,那么完全不建议使用jquery和react
material-ui install it by using
材料-ui通过使用来安装
npm i material-ui --save
and you can follow the example here for dialog which is basically a modal dialog in material ui
你可以按照这里的例子进行对话它基本上是一个模态对话框