2017-09-03 6 views
0

Reality On Rails 프로젝트에 Material UI를 가져 오려고했습니다.React On Rails에서 Material UI 사용하기

모든 것은 괜찮지 만, 그냥 ... RaisedButton

내가 RaisedButton를 가져 오려고 할 때마다, 나는 사진과 같은 오류 메시지가 표시됩니다, 사용할 수 없습니다 모듈을 포함한다. enter image description here 내 코드는 다음과 같습니다 :

import ReactOnRails from 'react-on-rails'; 
import PropTypes from 'prop-types'; 
import React from 'react'; 
import { createStore, combineReducers, applyMiddleware } from 'redux'; 
import { Provider } from 'react-redux'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import RaisedButton from 'material-ui/RaisedButton'; 

const App =() => (
    <MuiThemeProvider> 
     <RaisedButton label="hi"/> 
    </MuiThemeProvider> 
) 

ReactOnRails.register({ 
    App, 
}); 

UPDATE

그래서 hello_world/index.html.erb :

<h1>Hello World</h1> 
<%= react_component("App", props: @hello_world_props, prerender: false) %> 

레이아웃/hello_world.html.erb :

<!DOCTYPE html> 
<html> 
    <head> 
    <title>ReactOnRailsWithWebpacker</title> 
    <%= csrf_meta_tags %> 

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_pack_tag 'webpack-bundle' %> 
    </head> 

    <body> 
    <%= yield %> 
    </body> 
</html> 

어떻게 해결할 수 있습니까? 또는 React On Rails Gem의 버그 일뿐입니다.

+0

레이아웃 파일을 표시 할 수 있습니까? – Panther

+0

@ 팬더 주 메인'DOM'? –

+0

'rails' 레이아웃 파일. – Panther

답변

0

내가 문제를 찾을 생각 나는 내가 ref을 삭제하여 obj 키 ref가이 코드에서 node_module/material-ui/RaisedButton/RaisedButton.js 파일

return _react2.default.createElement(
     _Paper2.default, 
     { 
      className: className, 
      style: (0, _simpleAssign2.default)(styles.root, style), 
      zDepth: this.state.zDepth 
     }, 
     _react2.default.createElement(
      _EnhancedButton2.default, 
      (0, _extends3.default)({}, other, buttonEventHandlers, { 
      ref: 'container', 
      disabled: disabled, 
      style: (0, _simpleAssign2.default)(styles.button, buttonStyle), 
      focusRippleColor: mergedRippleStyles.color, 
      touchRippleColor: mergedRippleStyles.color, 
      focusRippleOpacity: mergedRippleStyles.opacity, 
      touchRippleOpacity: mergedRippleStyles.opacity 
      }), 
      _react2.default.createElement(
      'div', 
      { 
       ref: 'overlay', 
       style: prepareStyles((0, _simpleAssign2.default)(styles.overlay, overlayStyle)) 
      }, 
      enhancedButtonChildren 
     ) 
     ) 
    ); 

를 참조하고 오류가 표시되지 않습니다.

+0

material-ui github 저장소에 문제를 열 ​​수 있습니까? 고맙습니다 –