使用带有react-rails gem的'material-ui'吗? [英] Using 'material-ui' with react-rails gem?
问题描述
我想在Rails 4应用程序中使用material-ui组件库.我目前正在使用react-rails gem将.jsx编译添加到资产管道.我已经通过gemfile中的rails-assets添加了material-ui:
I would like to use the material-ui component library in my Rails 4 app. I am currently using the react-rails gem to add .jsx compilation to the asset pipeline. I have added material-ui via rails-assets in the gemfile like so:
source 'https://rails-assets.org' do
gem 'rails-assets-material-ui'
end
我需要在application.js文件中添加库,如下所示:
And I have required the library in my application.js file like so:
//= require material-ui
但是,我不断收到错误消息找不到文件'material-ui".如何将我的Rails应用程序中的material-ui组件库与react-rails gem一起使用?
However I keep getting the error "couldn't find file 'material-ui". How can I use the material-ui component library in my Rails app with the react-rails gem?
推荐答案
好的,这就是我到目前为止的工作...
Ok so here is what I have working so far...
我添加的gemfile中:
to the gemfile I have added:
gem 'react-rails'
gem "browserify-rails"
这为我们提供了反应库,帮助程序和jsx编译,以及使用require()语法在JS中要求模块的能力. browserify-rails还允许我们通过package.json文件在您的Rails资产中需要npm模块.
This gives us our react library, helpers and jsx compilation as well as the ability to use the require() sytax to require modules in our JS. browserify-rails also allows us to require npm modules in your Rails assets via a package.json file.
我们可以通过package.json文件将material-ui库添加到我们的应用中...
We can add the material-ui library to our app via this package.json file...
"dependencies" : {
"browserify": "~> 10.2.4",
"browserify-incremental": "^3.0.1",
"material-ui": "0.13.1"
},
材料ui库使用require语法以正确的顺序将所有不同的jsx组件文件连接在一起,因此这就是为什么我们需要使用browserify-rails的原因.
The material ui library uses the require syntax to join all the different jsx component files together in the right order so this is why we need to use browserify-rails.
接下来,为了将我们的反应代码保持在一起,我在asset/javascripts中创建了一个名为/react ...的新目录.
Next to keep our react code together I made a new directory in asset/javascripts called /react...
react
L /components
L react.js
L react-libraries.js
L theme.js
现在,作为"material-ui"依赖项的一部分,我们有了react库.这意味着目前我们有该库的两个副本.一个来自"react-rails" gem,另一个来自"browserify-rails"库的"material-ui"库依赖项.让我们从"material-ui"依赖项中使用一个,而从"react-rails"中保留一个.
Now as part of 'material-ui' dependencies we have the react library. This means at the moment we have two copies of the library. One from the 'react-rails' gem and one from the 'material-ui' library dependencies from 'browserify-rails'. Lets use the one from 'material-ui' dependencies and leave the one from 'react-rails'.
在react.js中:
in react.js:
//= require ./react-libraries
//= require react_ujs
//= require_tree ./components
然后在react-libraries.js中
Then in react-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 of this in the asset pipeline with...
//= require react/react
在application.js中.
in application.js.
现在您可以在/react/components/中的jsx文件中编写组件 您可能还想使用...为组件命名空间...
Now you can write your components in jsx files in /react/components/ You may also want to namespace your components with...
//Custom Components Namespace
Components = {};
在react-libraries.js中
in react-libraries.js
您可以像这样在theme.js中自定义主题...
You can customise 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)
}
};
希望有帮助:)
这篇关于使用带有react-rails gem的'material-ui'吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!