I just want to use/learn the one that’s most popular because it will be most documented and supported.
Material-UI?
React-Bootstrap?
Any others worth mentioning?
1 Like
I use MaterializeCSS (material design), but it has some quirks that don’t make it ideal. Still it is pretty good for a quick start.
What kind of quirks?
This looks like just what I needed (mostly cool stuff for pictures)!
http://materializecss.com/cards.html
http://materializecss.com/chips.html
http://materializecss.com/media.html
I’m using material-ui. I had some issues with difficulty of customisation (understandable, it’s following a spec after all!) or use for dynamic purposes (e.g. tabs) but other than that it works well.
In MaterializeCSS you will need to initialize some components (form elements, modals, etc.) when component mounts and if you plan to do anything special with select, then that might be a bit more difficult due to how Materialize handles it.
Not show stoppers, but you need to be aware of those things.
Woah MaterializeCSS works beautifully with just a
meteor add materialize:materialize
I think I’m just going to go with this for now, but I’d like to hear other opinions. I got Material-UI working eventually but I stumbled for far too long over the MuiTheme/making sure had I had compatible alpha/beta versions with React and whatnot. Just made me a little uncomfortable.
Semantic UI works great with React if you want a traditional CSS lib like you have with Bootstrap or MaterializeCSS, and they support a material design theme out of the box.
We have been looking at more of a React component approach and there are a number of solutions out there for material design besides Material-UI or React-Bootstrap. We have played around a bit with Essence and we like it as styling is Less instead of inline and their grid is mobile optimized. There is also React Toolbox and uses Sass, but not as mobile optimized and project seems to be losing steam, at least from our perspective.
Also, if you are looking for mobile only UI checkout Reactionic.
1 Like
If you need SASS, use this package:
https://atmospherejs.com/poetic/materialize-scss
If you want to use Bootstrap, there is a dedicated package for that:
https://react-bootstrap.github.io/
What is the benefit of react-bootstrap over just adding bootstrap package from atmosphere ?
No jquery and your UI is more React like.
Recently styled-components are all the rage. It is a bit spotty when it comes to frameworks, but it is really great in react.
I tried a couple of UI libraries and they are all quite different.
I used Material-UI more than a year ago in a small project. It felt quite good, though it had some issues.
Now I started a new big project using Material-UI in its 1.0 Beta version and I’m pretty happy with it and can definitely recommend it. With 30k+ stars it’s the most popular Material library on Github.
Talking about 30k stars Materialize is the second most popular one. That’s why I chose to use that for another non-react app. Unfortunately I came to the opinion that it’s no good choice for a real project. For prototyping it might be fine. Or if you are fine with just using it as it is. Since I used other libraries where I could just build the layout I wanted I couldn’t reach that goal with Materialize without heavy css adjustments. And the way they built the css it’s pretty hard to deal with it.
As an alternative to Materialize I can recommend having a look at the official google library: https://material.io/components/web/
When I was evaluating Material React libraries I also found https://react-md.mlaursen.com to be pretty nice. Whereas Material-UI is using JSS for styling they use SASS. This library is pretty feature rich and probably also a very good choice.
1 Like
Materialize has recently released a beta for v1 (the biggest thing for me is the removal of jQuery and other large dependencies), so they are improving as well, but I have to agree with your opinion of it.
The official Material components class names are… ugly. Could have been done better I think.
I guess you mean alpha? I’m using and talking about 1.0.0-alpha.1, there is no beta afaik.
The class names are one thing … the more serious thing is the absence of classes and styling via selectors instead.