Using “material-wi” with a reactive grating gem?

Question

I would like to use the -ui material library in a Rails 4 application. I am currently using rocket rail to add .jsx compilation to the asset pipeline. I added material-ui through rails-assets in the gemfile, for example:

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

And I required the library in the application.js file as follows:

 //= require material-ui 

However, I keep getting the error “I can't find the material-ui file. How can I use the material-ui component library in my Rails application with rhyme-rails?

Answer 1

So here is what I still work ...

in the gemfile that I added:

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

This gives us our reaction library, helpers and jsx compilation, as well as the ability to use require () sytax to use modules in our JS. Browsify-rails also allows us to require npm modules in your Rails resources through the package.json file.

We can add the material-ui library to our application through this package.json file ...

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

The ui material library uses the require syntax to combine all the different components of the jsx components together in the correct order, so we should use browser rails.

Next, to save our interaction code, I created a new directory in the / javascripts file called / reacting ...

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

Now, as part of the material-ui dependencies, we have a library of answers. This means that at the moment we have two copies of the library. One of the reaction-rails gems and one of the dependencies of the material-ui library on browsify-rails. Let's use one of the dependencies 'material-ui' and leave one of the "relays".

in the .js reaction:

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

Then in response-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'); 

Then we want to include all this in the asset pipeline with ...

 //= require react/react 

in application.js.

Now you can write your components in jsx files in / response / components / You may also want the namespace replaced with ...

 //Custom Components Namespace Components = {}; 

in response-libraries.js

You can customize your theme in theme.js like this ...

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

Hope that helps :)