我想在我的 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
但是我不断收到错误“找不到文件'material-ui”。如何在带有 react-rails gem 的 Rails 应用程序中使用 material-ui 组件库？
好的，这是我迄今为止所做的工作......
到我添加的 gemfile：
gem 'react-rails'
gem "browserify-rails"
这为我们提供了我们的react库、助手和 jsx 编译以及使用 require() 语法来要求我们 JS 中的module的能力。browserify-rails 还允许我们通过 package.json 文件在 Rails 资产中要求 npm module。
我们可以通过这个 package.json 文件将 material-ui 库添加到我们的应用程序中...
"dependencies" : {
"browserify": "~> 10.2.4",
"browserify-incremental": "^3.0.1",
"material-ui": "0.13.1"
},
Material ui 库使用 require 语法以正确的顺序将所有不同的 jsx 组件文件连接在一起，这就是我们需要使用 browserify-rails 的原因。
接下来为了保持我们的react代码在一起，我在资产/javascripts 中创建了一个名为 /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' 中的一个。
在 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)
}
};
希望有帮助:)