Verwendung von 'Material-UI' mit React-Rails-Edelstein?

Question

Ich möchte die Material-UI-Komponentenbibliothek in meiner Rails 4 App verwenden. Momentan verwende ich das react-rails-Juwel, um die .jsx-Kompilierung zur Asset-Pipeline hinzuzufügen.

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

Und ich habe die Bibliothek in meinem application.js wie so Datei erforderlich:: Ich habe wie so in der gemfile über Schienen-Assets Material-ui hinzugefügt

//= require material-ui 

aber ich bekomme immer wieder Fehler "konnte die Datei 'Material-UI' nicht finden. Wie kann ich die material-ui-Komponentenbibliothek in meiner Rails-App mit dem react-rails-Juwel verwenden?

Answer 1

Ok hier so ist das, was ich bisher arbeiten ...

zum gemfile ich hinzugefügt haben:

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

Dies gibt uns unsere reagieren Bibliothek, Helfer und jsx Compilation sowie die Fähigkeit, das require() - System zu verwenden, um Module in unserem JS zu benötigen. Mit browserify-rails können wir außerdem npm-Module in Ihren Rails-Assets über eine package.json-Datei anfordern.

Wir können die Material-ui-Bibliothek zu unseren App über diese package.json Datei hinzufügen ...

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

Das Material ui Bibliothek verwendet die Syntax erfordern alle die verschiedene jsx Komponente in den Dateien miteinander zu verbinden richtige Reihenfolge, deshalb müssen wir browsery-rails verwenden.

Next unseren Code reagieren zusammen zu halten habe ich ein neues Verzeichnis im Asset/Javascripts genannt/reagieren ...

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

nun als Teil der ‚Material-ui‘ Abhängigkeiten haben wir die Bibliothek reagieren. Dies bedeutet, dass wir zur Zeit zwei Kopien der Bibliothek haben. Eine aus dem 'react-rails'-Juwel und eine aus der' material-ui'-Bibliothek Abhängigkeiten von 'browsery-rails'. Verwenden wir die eine aus 'Material-ui' Abhängigkeiten und lassen Sie die eine von 'react-rails'.

in react.js:

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

Dann reagieren-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'); 

Dann wollen wir all dies in der Asset-Pipeline schließen mit ...

//= require react/react 

in application.js.

Jetzt können Sie Ihre Komponenten in jsx Dateien schreiben in/reagieren/components/ Sie auch Ihre Komponenten wünschen können Namespace mit ...

//Custom Components Namespace 
Components = {}; 

in reagieren-libraries.js

Sie kann Ihr Thema in theme.js so anpassen ...

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) 
    } 
}; 

Hoffnung, das hilft :)