使用’material-ui’和react-rails gem？
我想在我的Rails 4应用程序中使用material-ui组件库。 我目前正在使用react-rails gem将.jsx编译添加到资产管道。 我在gemfile中通过rails-assets添加了material-ui，如下所示：
source 'https://rails-assets.org' do gem 'rails-assets-material-ui' end 我在我的application.js文件中需要这样的库：
//= require material-ui
但是我一直收到错误“找不到文件’材料-ui”。 如何使用react-rails gem在我的Rails应用程序中使用material-ui组件库？
好的，这就是我到目前为止所做的工作……
到我添加的gemfile：
gem 'react-rails' gem "browserify-rails"
这为我们提供了反应库，助手和jsx编译，以及使用require（）sytax来获取JS中的模块的能力。 browserify-rails还允许我们通过package.json文件在您的Rails资产中要求npm模块。
我们可以通过这个package.json文件将material-ui库添加到我们的应用程序中……
"dependencies" : { "browserify": "~> 10.2.4", "browserify-incremental": "^3.0.1", "material-ui": "0.13.1" },
材料ui库使用require语法以正确的顺序将所有不同的jsx组件文件连接在一起，因此这就是我们需要使用browserify-rails的原因。
接下来保持我们的反应代码在一起我在asset / javascripts中创建了一个名为/ react的新目录…
react L /components L react.js L react-libraries.js L theme.js
现在作为’material-ui’依赖项的一部分，我们有了react库。 这意味着目前我们有两个图书馆副本。 一个来自’react-rails’gem，另一个来自’material-rails’的’material-ui’库依赖。 让我们使用’material-ui’依赖关系中的一个，并从’react-rails’中选择一个。
在react.js中：
//= require ./react-libraries //= require react_ujs //= require_tree ./components
然后在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');
然后我们希望将所有这些包含在资产管道中……
//= require react/react
在application.js中。
现在，您可以在/ react / components /中的jsx文件中编写组件。您可能还希望用…命名组件。
//Custom Components Namespace Components = {};
在react-libraries.js中
你可以在theme.js中自定义你的主题……
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) } };
希望有所帮助:)