Correct Way to Integrate Material UI with Meteor 1.3 beta/React?

react
1

I would like to integrate Material UI with Meteor 1.3 beta/React. This page, Meteor, React and Material UI the easy way, has the following update at the top:

[UPDATE 2015-06-27] Meteor MDG is changing its skin and now they provide a Meteor + React + Material UI integration example, which is a bit different to the one suggested here.

…however, the link under the word “example” now goes to a 404 error.

Is there currently a correct way to integrate Material UI with Meteor 1.3 beta/React?

Thanks in advance to all for any info.

1 Like
2

The recommended way is to use NPM directly -

  1. npm init (if you haven’t already)
  2. npm install --save react react-dom material-ui
// Using modules
import React from 'react';
import {AppBar} from 'material-ui';

See this blog post for reference (minus material-ui)

Btw the repo seems to have moved to https://github.com/meteor/react-packages/tree/devel/examples/material-ui-leaderboard

2 Likes
3

Ahh interesting. I thought you had to import from ‘material-ui/lib’. You learn something new every day :slightly_smiling:

1 Like
4

Thanks very much, reoh.

5

They do recommend importing directly from the component for build speed/size efficiency but for prototyping I think just getting them from one place should suffice until you want to optimise :slight_smile:

http://www.material-ui.com/#/get-started/usage

1 Like
6

Excellent. Thanks very much.

7

Hi @vikr00001, we got material-ui working with React and Meteor 1.3 in this branch of my simple crm example: https://github.com/tomRedox/simpleCRM/tree/material-ui. Might be a useful second reference to look at.

2 Likes
8

Thanks very much, Tom.

9

Hey folks.
Just trying out Material UI using your methods here.

I copied your imports above and in my console I get the following error -
warning.js:44 Warning: Failed Context Types: Required context muiTheme was not specified in AppBar.
Check the render method of MainLayout.

My ‘MainLayout’ code is this -

import React from 'react';
import AccountsUI from '../AccountsUI.jsx';
import AppBar from 'material-ui/AppBar';

export const MainLayout = ({content}) => (
  <div className="main-layout">
    <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
    {content}
  </div>
)

Any ideas?

10

Yes. You need to do this in your topmost container:

import React from 'react'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'

const lightMuiTheme = getMuiTheme(lightBaseTheme);

const App = React.createClass({
    render(){
        return(
            <MuiThemeProvider muiTheme={lightMuiTheme}>
                <div>
                    [... rest goes here...]
                </div>
            </MuiThemeProvider>
        )
    }
});

They changed that a bit when going from v14 to v15. For some reason, they also insist on not providing infos about breaking changes on their documentation. For that, you have to search the GitHub repo and go through the release notes.

Also, when going through said documentation, make sure that you’re selecting v15-beta.2 in the dropdown as that’s the version you’re likely on if you’re using React@v15

11

v15 was still in beta as of yesterday (official version number was 0.15.0-beta.2) , but appears to have been accidentally released for automatic download on “npm update material-ui”. It’s because it was still in beta that the docs weren’t updated. Checking just now for purposes of this post, I see the latest version is 0.15.0, so I guess it is now out of beta. :slight_smile: Presumably the docs will be updated shortly. I’ve had very good experience using it.

12

Yes, “accidentally”. I got alpha-1 by “accident” and when I noted this issue on their GitHub page, they told me that it was my own fault for downloading alpha software.

Nevermind that all I did was a mere npm install --save react material-ui :slight_smile:

13

Hey. Thanks
Trying to make this work currently.

I’ve got another question regarding React and my current setup.

(Not sure if this warrants another thread)

As you saw up above, my current MainLayout
is set up like this -

import React from 'react';
import AccountsUI from '../AccountsUI.jsx';
import AppBar from 'material-ui/AppBar';

export const MainLayout = ({content}) => (
  <div className="main-layout">
    <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
    {content}
  </div>
)

For your code there, would I just throw your stuff in there and put my HTML in the div?

Sorry, this React stuff is a little confusing. The tutorial I’m following is set up like this :
https://github.com/patrickbolle/React-and-Meteor-Todo-List/tree/master/client

My “topmost” container, if I am getting this right, is this MainLayout, but it seems the way I’ve been doing it with the tutorial looks wacky compared to how most other tutorials/examples I’ve seen do it.

GOT IT!

Here’s my mainlayout now :

import React from 'react';
import AccountsUI from '../AccountsUI.jsx';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import AppBar from 'material-ui/AppBar';

const lightMuiTheme = getMuiTheme(lightBaseTheme);

export const MainLayout = ({content}) => (
  <div className="main-layout">
    <MuiThemeProvider muiTheme={lightMuiTheme}>
      <div>
        <AppBar
          title="Title"
          iconClassNameRight="muidocs-icon-navigation-expand-more"
        />
        <main>
          {content}
        </main>
      </div>
    </MuiThemeProvider>
  </div>
)

Thanks!

1 Like