Hacker News Reader

Comment by mikewhy | Hacker News Reader

Material UI uses a very similar theming system. The interface of the theme itself is different, but that seems to be about it there.

Material UI has the exact same Box component, also using styled-system.

They're both libraries of components, so just as much a "nightmare" to extend or integrate.

Seems the biggest difference is this uses Emotion.

View on HN

> Material UI uses a very similar theming system. The interface of the theme itself is different, but that seems to be about it there.

Material UI implements Material UI by default and this is the main reason why it's hard to customize. Too much to change. I guess this is one of the reasons why there are not that many custom themes available for this library.

You don't need to use the Material UI provided theme. You can just use the Base components. Like InputBase [1] or ButtonBase [2] and build your own component out of it.

If you spend sometime with Material UI you will realize that it is actually designed really well.

[1]: https://material-ui.com/api/input-base/ [2]: https://material-ui.com/api/button-base/

Check this out and see if you find it actually hard to customize: https://news.ycombinator.com/item?id=23516513 ?

I count around 45 LOC just to change the colors of an input box. No changes to animation, borders focus mode or others. So yes: overly complicated.

Are you serious or are you trolling at this point? Because I just mentioned that you don't need to use the components Material UI provides and you can just use the Base components (which is what Chakra provides too or so does any other UI framework). Styling just those Base components will get it down to 8 or so LOC.

Also, since when does LOC say anything about developer productivity? By using Material UI you are avoiding a lot of problems that you will face later on especially if you are building a complex app.

Not trolling. But your second example is indeed more meaningful of the way I'd like to customize styling. And on that aspect, it is -as you mention- exactly the same as chakra, line to line. Except that Material also has a lot of additional stuff and opinions that I don't need.

But anyway, it looks like we have had different experiences, maybe due to different use cases. My experience with Material UI has been the opposite of yours: It is cool to get a quick project stated, and I would use it again for small projects. But for a large SaaS application like I do, that includes 3D views, Openlayers Maps, React Select and others complicated 3rd party libraries and custom UX patterns, I would NOT use Material UI. Too opinionated, not flexible enough, and not being based on emotion is a show stopper for me. So let's agree to disagree maybe on that point.

Regarding the LOC, yes it does indeed say something about developer productivity, and this does match the contortions I had to do in the past to make Material UI fit my need. Lot of LOC, lot of time, no-so-cool results. I want more control, that's all.

I don’t know, did you try to customize both? I did and I can tell you there is a massive difference. Have a look at the source code of both if you’d like. Material UI is like a full framework with a ton of specific tooling around it. Chakra is more like a library based on “standard” tools of the ecosystem, and it has a much smaller footprint. Worst case scenario I can just copy the code from chakra to heavily modify it. Don’t try that with material, it will be painful.

Just as an example, the code for Button in both frameworks:

==========================================

Chakra: 215 lines

https://github.com/chakra-ui/chakra-ui/blob/master/packages/...

Typical comment line in chakra is clear and useful:

"If added, the button will show an icon after the button's label"

==========================================

Material: 415 lines with a lot of boilerplate:

https://github.com/mui-org/material-ui/blob/master/packages/...

Typical comment line in material is redundant and overly specific:

Styles applied to the root element if `size="large"` and `variant="outlined"`

Reply on news.ycombinator.com