"reaction-boilerplate"코드에서 "material-components-web"사용

Question

GitHub의 기존 상용구 코드에 대한 연구를 마친 후 react-boilerplate을 사용하여 React 응용 프로그램을 시작했습니다. 내 웹 사이트에 Material 스타일을 추가 할 계획이었습니다. react-mdl이 현재 사용되지 않으므로 내 프로젝트에 material-components-web 의존성을 사용할 계획이었습니다.

이것은 첫 번째 React 응용 프로그램이며 기본 스타일을 제거하고 내 프로젝트의 material-components-web에 종속성을 추가하는 확실한 방법을 알고 싶습니다.

도움이 매우 감사합니다. 감사.

Answer 1

편집 : 업데이트 응답 (v0.22.0)에 CSS 여전히 일반 CSS를 사용하여 설정을위한

:

<link rel="stylesheet" href="LINK_TO/material-components-web.css"> 

을하지만하는 SCS를 사용하는 것이 좋습니다를, 당신이 할 수있는이 방법 테마 색상과 같은 다른 값을 재정의하고 원하는 방식대로 모든 것을 사용자 정의하십시오. 예 :

$mdc-theme-primary: #404040; 
$mdc-theme-accent: #a349a3; 
$mdc-theme-background: #fff; 

@import "@material/ripple/mdc-ripple"; 
@import "@material/typography/mdc-typography"; 
@import "@material/theme/mdc-theme"; 
@import "@material/button/mdc-button"; 

자바 스크립트와 관련하여 논리가 필요한 구성 요소를 사용하려면 보통이 구성 요소에 react.js 래퍼를 씁니다.

import React from 'react'; 
import { MDCDialog } from '@material/dialog/dist/mdc.dialog'; 

class AcceptDialog extends React.Component { 
    constructor(props) { 
     super(props); 

     this.passThroughInfo; 
    } 

    componentDidMount() { 
     this.dialog = new MDCDialog(this.refs.dialog); 
     // provide control to parent component to open the dialog from there 
     this.props.provideCtrl({ 
      show: (passThroughInfo) => { 
       this.passThroughInfo = passThroughInfo; 
       this.dialog.show(); 
      }, 
      close:() => { 
       this.passThroughInfo = undefined; 
       this.dialog.close(); 
      } 
     }); 

     this.dialog.listen('MDCDialog:accept',() => { 
      this.props.acceptCb(this.passThroughInfo); 
     }) 

     this.dialog.listen('MDCDialog:cancel',() => { 
      this.props.declineCb(this.passThroughInfo); 
     }) 
    } 

    componentWillUnmount() { 
     this.props.provideCtrl(null); 
    } 

    defaultProps = { 
     className: "", 
     id: "", 
     header: "", 
     text: "", 
     acceptCb: function() { }, 
     declineCb: function() { } 
    } 

    render() { 
     let className = "mdc-dialog accept_dialog" + this.props.className; 
     return (
      <aside className={className} role="alertdialog" ref="dialog" id={this.props.id}> 
       <div className="mdc-dialog__surface"> 
        {this.props.header !== "" && 
         <header className="mdc-dialog__header"> 
          <h2 className="mdc-dialog__header__title"> 
           {this.props.header} 
          </h2> 
         </header> 
        } 
        <section className="mdc-dialog__body"> 
         {this.props.section} 
        </section> 
        <footer className="mdc-dialog__footer"> 
         <button type="button" className="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Decline</button> 
         <button type="button" className="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept">Accept</button> 
        </footer> 
       </div> 
       <div className="mdc-dialog__backdrop"></div> 
      </aside> 
     ); 
    } 
} 

export default AcceptDialog 

그런 다음 다른 구성 요소에서 다음과 같이 사용합니다 :

// How to open the accept dialog 
this.accept_dialog.show(data); 

// The callback called on accept 
callback(data){...} 

<AcceptDialog 
    acceptCb={this.callback} 
    provideCtrl={ctrl => this.accept_dialog = ctrl}> 
</AcceptDialog> 

---

____________OLD ANSWER_______________

1) 추가 CSS 다음은 거절/동의 대화 상자 구성 요소에 대한 예입니다

정말 쉽습니다. 당신은 당신의 index.html 파일에 추가 할 수 있습니다 :

<link rel="stylesheet" href="LINK_TO/material-components-web.css"> 

당신은 또한 (당신이 @material NPM 모듈을 설치해야합니다 : --save @material를 설치 NPM을)를 말대꾸 파일에 액세스 할 수 SASS를 사용하는 경우 . 그런 다음 node-sass가 필요하고 webpack config에 @material 폴더의 경로를 포함시킵니다. 나는 이것을 시도하지 않았지만 이론적으로는 효과가있다.

자바 스크립트 추가

---

2) 다시 당신은 더 많은 가능성을 가지고있다. 여기 내가 한 일이있다. 당신은 지금 당신이 입력 필드의 구성 요소 (래퍼)를 만들 수 있습니다이

class Foo extends Component(){ 
componentDidMount(){ 
    // either this like that 
    mdc.textfield.MDCTextfield.attachTo(this.refs.textfield); 
    // or like that 
    const MDCTextfield = mdc.textfield.MDCTextfield; 
    const textfield = new MDCTextfield(this.refs.textfield); 
} 
render() { 
    return(
     <form className="form-group" onSubmit={this.submitForm}> 
      <div className="mdc-textfield" ref="textfield"> 
       <input type="text" id="my-textfield" className="mdc-textfield__input"/> 
       <label className="mdc-textfield__label" htmlFor="my-textfield">Hint text</label> 
      </div> 
     </form> 
    ); 
} 

}

같은 MDC를 가져올 수 있습니다.당신이하지 않으려면 해당 할 수도 있습니다 추가하여 자동 초기화 모든 구성 요소 :

// app.component.js  
import * as mdc from 'material-components-web/dist/material-components-web'; 

    class App extends React.Component { 
     componentDidMount(){   
      mdc.autoInit(); 
     } 
     render(){ 
      return(
       <div className="my-app"> 
        {this.props.children} 
       </div> 
      ); 
     } 
    } 

를하고 텍스트 필드에이를 추가

이

<div className="mdc-textfield" data-mdc-auto-init="MDCTextfield">

이제 다른 가능성이다 이런 식으로 가져 : 여기

import {MDCCheckbox} from '@material/checkbox';

당신이 당신의 웹팩 설정 파일에 bable 로더 말할 필요 node_modules/@ material 폴더도 포함시킵니다. 다른 모든 것은 기본적으로 동일하게 유지됩니다.

Answer 2

수정 @Jodo이 나를 위해 일했다, 조금 대답 :

import React from 'react' 
import {observer} from 'mobx-react' 

import * as mdc from 'material-components-web/dist/material-components-web' 

@observer 
export class RegisterForm extends React.Component{ 
    /** 
    * Notice I'm calling mdc.autoInit() on the "RegisterForm" component NOT on any parent component 
    * Actually, when I call mdc.autoInit() on any parent component, it won't work 
    */ 
    componentDidMount=()=>{mdc.autoInit()} 
    setMeta=(e)=>{ 
     this.props.store.storeReg.setMeta(e.target.name,e.target.value) 
    } 
    preview=()=>{ 
     this.props.store.storeReg.preview() 
    } 
    render=()=>{ 
     return(
      <form onChange={this.setMeta.bind(this)}> 
       <div class="mdc-form-field"> 
        <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield"> 
         <input class="mdc-textfield__input" type="text" required name="email" value={this.props.store.storeReg.meta.get('email')}/> 
         <label class="mdc-textfield__label" for="email">Email</label> 
        </div> 
       </div> 
       <div class="mdc-form-field"> 
        <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield"> 
         <input class="mdc-textfield__input" type="text" required name="first_name" value={this.props.store.storeReg.meta.get('first_name')}/ 
         <label class="mdc-textfield__label" for="first_name">First Name</label> 
        </div> 
       </div> 
       <div class="mdc-form-field"> 
        <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield"> 
         <input class="mdc-textfield__input" type="text" required name="last_name" value={this.props.store.storeReg.meta.get('last_name')}/> 
         <label class="mdc-textfield__label" for="last_name">Last Name</label> 
        </div> 
       </div> 
       <div class="group"> 
        <button class="mdc-button mdc-button--raised mdc-button--primary mdc-ripple-surface" data-mdc-auto-init="MDCRipple" type="button" onClic 
       </div> 
      </form> 
     ) 
    } 
}