React-starter-kit: How to Integrate Material Design Lite (MDL) or react-mdl for react-starter-kit

[hienhuynhtm]

I've problem when integrating MDL/react-mdl to our project. Could you please help me?

[hienhuynhtm]

Hi admin,

Could you guys please help me on integrating with MDL? I love this great boilerplate, but my requirement is using MDL, not bootstrap.
It seems that MDL scripts does not work in our client (CSS works well).

Thanks.

[koistya]

@hienhuynhtm the easiest way would be referencing MDL's .css and .js files in src/components/Html.js then decorating your UI elements with MDL classes as usual and calling upgradeElement() / downgradeElement(). For example:

class Button extends React.Component {
  componentDidMount() {
    window.componentHandler.upgradeElement(this.root);
  }
  componentWillUnmount() {
    window.componentHandler.downgradeElements(this.root);
  }
  render() {
    return (
      <button
        ref={node => { this.root = node; }}
        className="mdl-button mdl-js-button"
        {...this.props}
      />;
  }
}

Find more info here https://github.com/kriasoft/react-static-boilerplate/blob/master/docs/recipes/how-to-integrate-material-design-lite.md

[hienhuynhtm]

Wow, thanks you so much for quick react.

I've referenced MDL's files in Html.js, but no luck.
I'll try your second step (upgradeElement()/downgradeElement()), hope it success.

Thanks again, Koistya.

[hienhuynhtm]

I've fixed this issue by referenced MDL JS file of React-MDL: https://cdn.rawgit.com/react-mdl/react-mdl/master/extra/material.min.js.
Anyway, thank again.

[zirho]

Hey all,
Can we do this with HOC?
Thanks

[langpavel]

@zirho I'm sure that HoC are not good solution for this. But I can be wrong...

[zirho]

@langpavel I see, I was just wondering because if that's what I need to do for every component that I want to use MDL with, it seems not to be very practical IMO. Hope someone can come up with a better solution for that.

[langpavel]

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

[zirho]

@langpavel I used it one of my side projects and found that it's not that scalable.
It can get very slow and bottlenecking with quite amount of components calculating their own styles in client side.
Thank you for the suggestion tho. I'll get back to this when I found something useful.

[langpavel]

I find most useful to not depend on pure frontend style library. I like bootstrap for this but in practice I haven't using anything of these..
Everything I ever need is perfectly separated grid library. I didn't met any. I can miss some pretty good lib in this in mind. If you discover something useful in this sense, let us know please! :smiling_imp:

[zirho]

Maybe, you can use this http://getbootstrap.com/customize/ to select only the grid system. and apply to your project :)