¿Usando ‘material-ui’ con gem reaccion-rails?

Me gustaría usar la biblioteca de componentes material-ui en mi aplicación Rails 4. Actualmente estoy usando la gem de react-rails para agregar la comstackción .jsx al flujo de activos. He añadido material-ui a través de rails-asset en el archivo gem como:

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

Y he requerido la biblioteca en mi archivo application.js así:

 //= require material-ui 

Sin embargo, sigo recibiendo el error “no se pudo encontrar el archivo ‘material-ui”. ¿Cómo puedo usar la biblioteca de componentes material-ui en mi aplicación Rails con la gem react-rails?

Ok así que aquí es lo que tengo trabajando hasta ahora …

al gemfile he añadido:

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

Esto nos brinda nuestra biblioteca de reactivos, ayudantes y comstackción de jsx, así como la capacidad de usar el sistema () necesario para requerir módulos en nuestro JS. browserify-rails también nos permite requerir módulos npm en sus activos de Rails a través de un archivo package.json.

Podemos agregar la biblioteca de material ui a nuestra aplicación a través de este archivo package.json …

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

La biblioteca de ui de material utiliza la syntax requerida para unir todos los diferentes archivos de componentes jsx en el orden correcto, por lo que es por eso que necesitamos usar browserify-rails.

A continuación, para mantener nuestro código de reacción en conjunto, hice un nuevo directorio en activo / javascripts llamado / reactjsr …

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

Ahora, como parte de las dependencias de ‘material-ui’ tenemos la biblioteca reactjsr. Esto significa que en este momento tenemos dos copias de la biblioteca. Uno de la gem ‘react-rails’ y otro de las dependencias de la biblioteca ‘material-ui’ de ‘browserify-rails’. Vamos a usar el de las dependencias ‘material-ui’ y dejar el de ‘reaccion-rails’.

en react.js:

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

Luego en react -raries.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'); 

Luego queremos incluir todo esto en la cartera de activos con …

 //= require react/react 

en application.js.

Ahora puede escribir sus componentes en archivos jsx en / react / components / También puede querer que sus componentes tengan un espacio de nombre con …

 //Custom Components Namespace Components = {}; 

en react -raries.js

Puedes personalizar tu tema en theme.js como este …

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

Espero que ayude 🙂