react와 함께 materialize-css를 사용하는 방법
ES6 모듈을 사용한 Meteor/React 프로젝트가 있습니다.npm을 사용하여 materialize-css를 설치했습니다만, 실제로 JSX 코드에서 materialize 클래스를 사용하는 방법을 모르겠습니다.materialize-css에서 무엇을 수입해야 합니까?아니면 CSS를 main index.html 파일에 포함시키면 되나요?
실제 UI 컴포넌트에 material-ui를 사용할 예정이기 때문에 그리드 시스템에 가장 많이 사용하고 싶습니다.
CSS 모듈을 사용하기 때문에 구체화 css를 Import하면 해당 컴포넌트로 범위가 지정됩니다.그래서 나는 다음과 같이 했다.
1단계) 설치 구체화
npm install materialize-css@next
순서 2) index.html의
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
3단계) 필요한 컴포넌트에 materialize.js를 Import합니다.
예를 들어 SomeComponent.js(예를 들어 sidenav에 관한 경우)의 경우
import React from 'react';
import M from 'materialize-css';
....
// ref can only be used on class components
class SomeComponent extends Component {
// get a reference to the element after the component has mounted
componentDidMount(){
M.Sidenav.init(this.sidenav);
}
render(){
return (
<ul className={this.props.classes}
ref={ (sidenav) => {this.sidenav = sidenav} }
id={this.props.id}>
// menuItems
</ul>
)
}
}
초보자일 뿐이므로 이 방법의 단점에 대한 코멘트를 주시면 감사하겠습니다.
NPM의 경우:
순서 1) 설치 실현
npm install materialize-css@next
구체화 문서에서 업데이트가 있는지 확인합니다.마지막 @next를 놓치지 마세요.설치된 버전은 ^1.0-rc.2 또는 ^1.0.0-alpha.4와 같습니다.
2단계) 구체화 JS 가져오기:
import M from 'materialize-css'
또는 'materialize-css/dist/js/materialize.min.js'에서 M을 Import해 보십시오.
스텝 3) CSS Import:
index.html의 경우
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
javascript의 OR
import 'materialize-css/dist/css/materialize.min.css'
css Import가 기능하려면 css 로더가 필요합니다.이 로더는 이미 create-react-app을 사용하여 빌드된 프로젝트에 포함되어 있으므로 다음 단계는 필요하지 않습니다.커스텀 Web 팩 설정을 사용하고 있는 경우는, 다음의 순서를 실행합니다.
npm install --save-dev style-loader css-loader
이것으로 webpack 설정에 css-loader와 style-loader를 추가합니다.
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.join(__dirname, "build")
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "react"]
}
}
}
]
}
}
이제 M을 사용하여 컴포넌트를 개별적으로 초기화하거나 한꺼번에 초기화할 수 있습니다.AutoInit();
4단계) 구체화 아이콘 가져오기:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
CDN의 경우:
HTML 파일에 다음 항목을 추가합니다.
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!-- Materialize Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
그런 다음 웹 팩 설정에서 https://webpack.js.org/configuration/externals/ 를 추가합니다.
https://react-materialize.github.io/ #/ 를 사용하면, 수레바퀴를 재창조하는 이유를 알 수 있습니다.
react-materialize
npm install react-materialize
사용.
import {Button, Icon} from 'react-materialize'
export default () => (
<Button waves='light'>
<Icon>thumb_up</Icon>
</Button>
)
샘플
https://github.com/hiteshsahu/react-materializecss-template
스크린샷
ReactJs에서 Materialize CSS를 사용하는 방법은 여러 가지가 있습니다.하지만, 저는 항상 다음과 같이 쉬운 것을 사용합니다.
여기서는 HTML 사이트와 마찬가지로 태그가 있는 ClassName만 사용하여 Materialize CSS 클래스를 사용할 수 있습니다.
1) React용 Materialize CSS 설치NPM을 사용하는 JS
npm install materialize-css@next
2) 다음으로 minified materialize CSS 파일을 index.js 파일로 Import합니다.
import 'materialize-css/dist/css/materialize.min.css'
3) 구글 아이콘을 사용하려면 다음 코드를 public / index.html 파일에 추가합니다.
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
4) 마지막으로 입력 폼 또는 기타 장소에서 Javascript 이벤트를 사용하려면 public / index.html 파일에 다음 코드를 추가합니다.
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
N.B. => 모든 파일은 index.disc 파일을 통과해야 하므로 최소화된 Materialize CSS를 index.disc에 한 번 Import하면 됩니다.그렇지 않으면 이러한 CSS 파일을 모든 js 파일로 Import해야 합니다.
이 정도면 리액트를 준비할 수 있습니다.Materialize CSS를 사용하여 가동 및 실행하기 위한 JS 폴더.해피 코딩
질문에 는, 나는 '아주머니', '아주머니', '아주머니'라고 한다.npm i materialize-css에.
import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js";
그 일을 할 수 있을 거야
제가 직면한 문제와 해결 방법을 공유하고 싶었습니다.나는 재료 상자를 작업하기 위해 가져가고 싶었지만, 이렇게 했습니다.
import React, { Component } from "react";
import M from "materialize-css/dist/js/materialize.min.js";
class Image extends Component {
constructor(props) {
super(props);
this.imageRef = React.createRef();
}
onLoad = () => {
M.Materialbox.init(this.imageRef.current);
};
render() {
return (
<img
src="..."
alt="..."
className="materialboxed"
ref={this.imageRef}
onLoad={this.onLoad}
/>
);
}
}
export default Image;
만한 점 - 했을 때 - 그것은 효과가 없었다.M.init에 inside inside inside componentDidMount 수 .componentDidMount들어졌졌다다
모달 등의 컴포넌트를 사용하여 JS를 많이 사용하고 싶다면 react-materialize는 확실히 작업을 쉽게 만들 것입니다.
권장할 수 있는 방법은 다음과 같습니다.
한 가지 방법은 스타일시트 파일을 index.html에 포함시키고 다음과 같이 react 컴포넌트에 className 속성을 사용하는 것입니다.
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));다른 방법은 모든 스타일시트 파일을 하나의 스타일시트 파일로 묶어서 이전 스타일시트 파일로 사용하는 것입니다.
하나의 옵션은 웹 팩을 사용하는 것입니다.웹 팩을 사용하면 포함할 스타일시트가 필요한 것만으로 jsx 파일에 포함된 스타일시트를 사용할 수 있습니다.
require("./stylesheet.css")웹 팩 스타일시트 옵션에 대한 자세한 내용은http://http://webpack.github.io/docs/stylesheets.html 를 참조해 주세요.
- 조건부 className 사용에 대해서는 JedWatson의 클래스 이름 repo도 참조하십시오.https://github.com/JedWatson/classnames
솔루션 index.html 미포함
- 고객님의 고객명
App.js★★★★★★★★★★★★★★★★★」App.jsx
import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js";
사용 예:
예 1
import React from "react";
import { Button } from "react-materialize";
export default function CustomMediaBox() {
return <Button> Click Me </Button>;
);
}
예 2
import React from "react";
import { MediaBox } from "react-materialize";
export default function CustomMediaBox() {
return (
<MediaBox
options={{
inDuration: 275,
onCloseEnd: null,
onCloseStart: null,
onOpenEnd: null,
onOpenStart: null,
outDuration: 200
}}
>
<img
alt=""
src="https://materializecss.com/images/sample-1.jpg"
width="650"
/>
</MediaBox>
);
}
옵션 - 아이콘 추가
필요한 것은 구글을 """ "" "" 에 합니다.
App.css임의의 「」를 참조해 주세요..css에서App.js★★★★★★★★★★★★★★★★★」App.jsx@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
메모
다음과 같은 오류가 발생할 경우:
./node_modules/react-materialize/lib/Breadcrumb.js Module not found: Can't resolve 'classnames' in '/Users/artiomlk...
npm install classnames
번들 사이즈에 관한 문제에 대처하기 위해 번들사이즈를 사용하는 가장 쉬운 방법은 다음과 같습니다.
- CDN 링크를 index.html 파일에 포함합니다.
- 「」를 합니다.
M내this.M = window.M - 및 Materialize 의 경우 된 바와 같이 할 수 .
this.M - 는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
componentDidMount라이프 사이클 방식 - 시(내부)
componentWillUnmount컴포넌트를 구체화하다
- 구체화 설치
npm i materialize-css@next
- 초기화
import React, { useEffect } from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css/dist/js/materialize.min.js';
function App() {
useEffect(() => {
M.AutoInit();
},[])
return (
<div className="App">
// content...
</div>
);
}
"imports" 폴더에 복사하고 다음을 통해 추가할 수 있습니다.
import '../imports/stylesheets/materialize.min.css';
또는 LESS 예시에 사용합니다.
@import '{}npm-package-name/stylesheets/...';
이 답변들은 번들 사이즈와 몇 가지 컴포넌트를 사용하기 위해 많은 코드를 Import하는 나의 가장 큰 관심사를 만족시키지 못했다.코드 분할과 간단한 컴파일 단계를 포함하는 솔루션을 여기에 작성했습니다.
요점은 다음과 같습니다.
- 기본 JS 파일 컴파일(4개)
- Import/Bundler를 실행하기 전에 기본 JS가 포함되어 있는지 확인하십시오.
- CSS Import를 필요한 것만 변경합니다.
- sas를 지원하는 경우 bundler를 통해 materialize.scss를 실행하거나 컴파일 단계를 실행하여 최소화된 css 파일을 가져옵니다.
- 개별 구성 요소를 가져오고 수동으로 활성화
CDN 사용:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
★★★★★★★★★★★★★★★.const M = window.M;초기화를 실행합니다.
이 대답을 넣기엔 너무 늦은 것 같아.componentDidMount를 이 비디오와 같이 사용할 수 있습니다.
단, 리액트 훅은 사용하지 않습니다.리액트 후크를 사용하는 것이 좋습니다(useEffects).
아이콘 및 기타 js 기능과 함께 react와 materialize-css를 사용하는 방법
warn add materialize-css@next --save 또는 npm install materialize-css@next --save
실 추가 재료 설치 아이콘 또는 npm 설치 재료 아이콘
3. 다음과 같이 친절하게 Import; snap
import 'materialize-css/dist/css/materialize.min.css';
'materialize-css/dist/materialize'를 수입한다.
'material-icon/iconfont/material-icon.css' 가져오기
function App() {
return (
<div className="App">
<nav className="nave-wrapper">
<div className="container">
<a href="#!" class="brand-logo left">Logo</a>
<ul className="right">
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Contact</a></li>
</ul>
</div>
</nav>
<div className="container">
<i class="material-icons">add</i>
<i class="large material-icons">insert_chart</i>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6"/>
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate"/>
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate"/>
<label for="icon_telephone">Telephone</label>
</div>
</form>
</div>
</div>
</div>
);
}
export default App;
- 구체화 설치
npm i materialize-css@next
npm install react-materialize
- 초기화
import React, { useEffect } from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css/dist/js/materialize.min.js';
const App = () => {
useEffect(() => {
// Init Materialize JS
M.AutoInit();
});
return (
<div className="App">
// content...
</div>
);
}
export default App;
에서 npm까지 실현 css를 합니다.
npm install materialize-css@next를 추가합니다.
import 'materialize-css/dist/css/materialize.min.css'App.js 파일에 저장하여 글로벌하게 구체화를 추가할 수 있으므로 개별 컴포넌트에서 구체화를 호출할 필요가 없습니다.이와 같은 수업을 구체화라고 부른다.
<button className="waves-effect waves-light btn blue darken-4"><i class="material-icons">add</i></button>구체화 글꼴의 경우 추가
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">public 폴더에 있는 index.displaces로 이동하여 아이콘을 호출합니다.
사이드 노트:React 18.2.0을 사용하고 있습니다.또한 내 github 코드를 보내드릴 수 있습니다.
언급URL : https://stackoverflow.com/questions/35499842/how-to-use-materialize-css-with-react
'programing' 카테고리의 다른 글
| PHP 및 jQuery를 사용하여 보안 AJAX 요청을 보내는 방법 (0) | 2023.03.21 |
|---|---|
| 웹 팩을 사용하여 CDN 또는 외부 벤더 javascript lib를 html 파일이 아닌 js 파일로 로드하는 방법 (0) | 2023.03.21 |
| JSON POST 요청을 레일즈 앱에 포맷하려면 어떻게 해야 합니까? (0) | 2023.03.21 |
| 다른 속성에서 정의된 디렉티브 속성 내의 콜백 함수 (0) | 2023.03.21 |
| JSON 문자열을 만들 때 특수 문자를 피하는 방법 (0) | 2023.03.21 |