Sử dụng 'material-ui' với đá quý phản ứng-ray?

Question

Tôi muốn sử dụng thư viện thành phần material-ui trong ứng dụng Rails 4 của mình. Tôi hiện đang sử dụng đá quý phản ứng đường ray để thêm biên dịch .jsx vào đường dẫn nội dung. Tôi đã thêm các tài liệu-ui qua đường ray-tài sản trong gemfile như vậy:

source 'https://rails-assets.org' do 
    gem 'rails-assets-material-ui' 
end 

Và tôi đã yêu cầu thư viện trong application.js tôi nộp như sau:

//= require material-ui 

Tuy nhiên tôi tiếp tục nhận được lỗi "không thể tìm thấy tệp 'material-ui". Làm thế nào tôi có thể sử dụng thư viện thành phần vật liệu-ui trong ứng dụng Rails của tôi với đá quý phản ứng-ray?

Answer 1

Ok vì vậy đây là những gì tôi đã làm việc cho đến nay ...

đến gemfile Tôi đã thêm:

gem 'react-rails' 
gem "browserify-rails" 

này cho chúng ta chúng ta phản ứng thư viện, giúp đỡ và jsx biên soạn cũng như khả năng sử dụng sytax require() để yêu cầu các mô-đun trong JS của chúng tôi. browserify-rails cũng cho phép chúng ta yêu cầu các mô đun npm trong tài sản Rails của bạn thông qua một tệp package.json.

Chúng ta có thể thêm các thư viện tài liệu-ui để ứng dụng của chúng tôi thông qua tập tin package.json này ...

"dependencies" : { 
    "browserify": "~> 10.2.4", 
    "browserify-incremental": "^3.0.1", 
    "material-ui": "0.13.1" 
    }, 

Thư viện ui liệu sử dụng cú pháp yêu cầu để tham gia tất cả các thành phần khác nhau jsx tập tin với nhau trong đúng thứ tự vì vậy đây là lý do tại sao chúng ta cần phải sử dụng trình duyệt-rails.

Next để tiếp tục phản ứng của chúng tôi đang cùng nhau tôi đã thực hiện một thư mục mới trong tài sản/Javascripts gọi/phản ứng ...

react 
    L /components 
    L react.js 
    L react-libraries.js 
    L theme.js 

Bây giờ như là một phần của 'tài liệu-ui' phụ thuộc chúng ta có thư viện phản ứng. Điều này có nghĩa là tại thời điểm này chúng tôi có hai bản sao của thư viện. Một từ đá quý 'phản ứng-rails' và một từ các phụ thuộc thư viện 'material-ui' từ 'browserify-rails'. Cho phép sử dụng một từ phụ thuộc 'material-ui' và để nguyên từ 'phản ứng rails'.

trong react.js:

//= require ./react-libraries 
//= require react_ujs 
//= require_tree ./components 

Sau đó, trong phản ứng-libraries.js

//React Library 
React = require('react'); 
//Material Design Library 
MaterialUi = require('material-ui/lib'); 
injectTapEventPlugin = require('react-tap-event-plugin'); injectTapEventPlugin(); 
//Material Design Library Custom Theme 
MyRawTheme = require('./theme'); 
ThemeManager = require('material-ui/lib/styles/theme-manager'); 

Sau đó, chúng tôi muốn bao gồm tất cả những điều này trong các đường ống tài sản với ...

//= require react/react 

trong application.js.

Bây giờ bạn có thể viết các thành phần của bạn trong các tập tin jsx nhập/phản ứng/components/ Bạn cũng có thể muốn không gian tên các thành phần của bạn với ...

//Custom Components Namespace 
Components = {}; 

trong phản ứng-libraries.js

Bạn có thể tùy chỉnh chủ đề của bạn trong theme.js như thế này ...

Colors = require('material-ui/lib/styles/colors'); 
ColorManipulator = require('material-ui/lib/utils/color-manipulator'); 
Spacing = require('material-ui/lib/styles/spacing'); 

module.exports = { 
    spacing: Spacing, 
    fontFamily: 'Roboto, sans-serif', 
    palette: { 
    primary1Color: Colors.grey300, 
    primary2Color: Colors.grey300, 
    primary3Color: Colors.lightBlack, 
    accent1Color: '#01A9F4', 
    accent2Color: Colors.grey100, 
    accent3Color: Colors.grey500, 
    textColor: Colors.darkBlack, 
    alternateTextColor: Colors.white, 
    canvasColor: Colors.white, 
    borderColor: Colors.grey300, 
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3) 
    } 
}; 

Hy vọng rằng sẽ giúp :)