使用‘资料-ui’与反应-rails宝石？

Question

我想在我的Rails 4应用程序中使用material组件库。我目前正在使用react将.jsx编译添加到资产管道中。我在via文件中添加了资料-通过rails的ui-资产，如下所示：

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

我在我的application.js文件中要求库如下所示：

//= require material-ui

然而，我不断地得到错误“无法找到文件‘资料-ui”。我如何使用材料-ui组件库在我的Rails应用程序与react宝石？

Answer 1

好的，这就是我目前所做的工作.

在我添加的宝石文件中添加了：

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

这为我们提供了我们的react库、助手和jsx编译，以及使用require() sytax来要求JS中的模块的能力。browserify-rails还允许我们通过package.json文件在Rails资产中要求npm模块。

我们可以通过这个package.json文件向我们的应用程序添加资料-ui库.

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

material库使用require语法将所有不同的jsx组件文件按正确的顺序连接在一起，因此这就是我们需要使用browserify-rails的原因。

接下来，为了将我们的反应代码放在一起，我在资产/javascripts中创建了一个名为/react的新目录.

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

现在，作为‘material’依赖关系的一部分，我们有了react库。这意味着目前我们有两份图书馆。一个来自‘react rails’宝石，一个来自‘material’库依赖项，来自'browserify-rails‘。让我们使用“material”依赖项中的一个，而保留“rails”中的一个。

在react.js中：

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

然后进入反应-图书馆员

//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 = {};

反应-图书馆. in

你可以像这样在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)
  }
};

希望有帮助:)