首页 文章

使用'material-ui'与react-rails gem？

提问于
浏览 次
7

我想在我的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组件库？

ruby-on-rails reactjs asset-pipeline react-jsx react-rails

1 回答

  • 15

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

    到我添加的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'宝石，另一个来自'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)
  }
};

    希望有所帮助:)

    回复于

相关问题