React projects with materialize-css vs react-toolbox or material-ui

Question

Do I lose some technical benefit or is my code less reliable if I use material-css directly in my JSX rather than using a JSX specific library such as material-ui or react-toolbox? Or, conversely, do I gain performance, reliability or other measurable benefit by using a JSX library such as material-ui or react-toolbox rather than just putting materialize-css code in my JSX?

When writing React components, I find I can use materialize-css directly in my JSX:

<div className="row">
    <div className="blue lighten-5 col s12 m1 l1">1</div>
</div>
<a className="waves-effect waves-light btn">Stuff</a>

Or I can use JSX specific library such as material-ui:

import RaisedButton from 'material-ui/RaisedButton';
...
<RaisedButton label="Submit" type="submit" primary={true} style={style}/>

I'm not asking "Which is your favorite library?". Nor am I asking "What is the difference in output between RaisedButton and a button with this style: 'waves-effect waves-light btn'.

I'm asking: do I gain technical benefits or increased reliability if I use material-ui or some similar JSX specific library compared to just putting materialize-css code in my JSX? If there are benefits or risks involved then what are they? What should I be looking for in the way of pitfalls?

What did you decide in the end? and how did you see the benefits ? — Mickey Puri
– Mickey Puri, Commented Feb 21, 2018 at 16:09
@Mickey Puri: I ended up using Material-UI. The comments by both gravityplanx and Jeremy Bunn led me to this conclusion, and I don't regret it. I believe it makes my code easier to write and understand. — ccalvert
– ccalvert, Commented Feb 22, 2018 at 19:30
Thanks. I came to the same decision. I did however look quite hard at rmwc as it wraps the Google Web Components. But in the end decided to go with Material-UI due to its having a much larger takeup and userbase, hence seemed bit more mature — Mickey Puri
– Mickey Puri, Commented Feb 23, 2018 at 23:04

Jake Haller-Roby · Accepted Answer · 2017-09-12 16:57:32Z

2

For buttons, the difference is inconsequential, so it's no surprise you're not seeing the best path.

Where Material-UI wins out is in it's functional components. The DatePicker, AutoComplete, and Tabs jump out as the most obvious in these regards. MUI is built on react, and these functional elements are setup to be customized by your own events and handlers in a way that raw css just can't do.

The MUI library is also just much larger than the materialize library.

answered Sep 12, 2017 at 16:57

Jake Haller-Roby

6,4381 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Bunn · Accepted Answer · 2017-09-12 23:05:35Z

1

If you go the materialcss route, consider at least leveraging react-materialize.

https://react-materialize.github.io

There is a bit of work to do things the material way beyond the stylesheets. This requires JS, no need to reinvent the wheel. Plus you get all the advantages of leveraging a popular library. Testing, bug fixes, new functionality... etc..

The best part is, you can reinvent the wheel and make your own materialize based components if you want to and still have the same look and feel as the react-materialize components.

I however, am using Material-UI. It is a great framework for very rapidly developing modern looking apps.

Good luck!

answered Sep 12, 2017 at 23:05

Jeremy Bunn

6716 silver badges19 bronze badges

Collectives™ on Stack Overflow

React projects with materialize-css vs react-toolbox or material-ui

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related