7 ms·

what advantage does this bring over something like material-ui?

by modzu 6y ago

tiltrus 6y ago
Also curious here...
crubier 6y ago
Material UI is a nightmare to customize, extend or integrate with third party react libraries. This on the other hand is fully customizable (through theming AND the css props) and use emotion, so it plays well with A LOT of libraries that use emotion too.
- mikewhy 6y ago
  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.
  - player2121 6y ago
    > 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.
    - shripadk 6y ago
      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/ https://material-ui.com/api/input-base/ [2]: https://material-ui.com/api/button-base/ https://material-ui.com/api/button-base/
    - shripadk 6y ago
      Check this out and see if you find it actually hard to customize: https://news.ycombinator.com/item?id=23516513 https://news.ycombinator.com/item?id=23516513 ?
      - crubier 6y ago
        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.
        shripadk 6y ago
        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.
        crubier 6y ago
        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.
  - crubier 6y ago
    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.
    - crubier 6y ago
      Just as an example, the code for Button in both frameworks: ========================================== Chakra: 215 lines https://github.com/chakra-ui/chakra-ui/blob/master/packages/button/src/button.tsx 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/material-ui/src/Button/Button.js 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"`
- shripadk 6y ago
  Material UI actually is a lot better when it comes to customization. You can just override the provided component styles by creating ad-hoc CSS-in-JS styles and passing it as classes. This is apart from what Chakra UI provides. Both uses some form of styled-system but Material UI implements it better. Material UI provides an API to modify the styles of core components in any depth that you like. You do it through the `classes` prop. So for complex components like TextField which has an InputLabel, Input and FormHelper component you have corresponding props: InputLabelProps, InputProps and FormHelperProps which accepts a `classes` prop each. You can then create ad-hoc CSS-in-JS styles using makeStyle and pass them as classnames to the respective inner-components `classes` prop. You'll realize the advantage of this only when you try it out. Here is a quick example I created for you to try: https://codesandbox.io/s/material-demo-d2vmn?file=/demo.js:268-592 https://codesandbox.io/s/material-demo-d2vmn?file=/demo.js:2... The left side is a normal TextField and the right side is a TextField with styles overridden. If you do not like the TextField component Material UI provides you can always create your own with InputBase component. Edit: Hacker News isn't letting me post a comment to your comment so I am editing my comment here. Your example doesn't match mine. It just styles the component itself. Not inner components. For that you need a uniform API which neither Emotion nor Chakra provide. Please see my example again. The TextField component is a complex component comprising of InputLabel, Input and FormHelper. The idea is to style those inner components without actually breaking apart the source. We need a uniform API for that and neither Emotion nor Chakra provide something along those lines. Which is the crux of the argument on why Material UI is superior. It not only provides CSS-in-JS styling options like Emotion but also provides a standard API to style inner components no matter how deep in the tree they are. If you want to replicate the same feature you would have to create your own abstraction. But then that abstraction is not on the library level but your application level. So if someone wants to work on your app, they will have to learn your abstraction first. If they move on to another app they can't carry over your abstraction in case the other app doesn't have the same implementation. They will either have to learn the new implementation or create that abstraction from scratch leading to a lot of bloat. If I know some project is using Material UI I feel comfortable knowing that the API to modify a component and its inner components will be the same. That gives me a lot of confidence.
  - 6y ago

what advantage does this bring over something like material-ui?

by modzu 6y ago

what advantage does this bring over something like material-ui?

tiltrus 6y ago

Also curious here...

crubier 6y ago

Material UI is a nightmare to customize, extend or integrate with third party react libraries. This on the other hand is fully customizable (through theming AND the css props) and use emotion, so it plays well with A LOT of libraries that use emotion too.

mikewhy 6y ago
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.
- player2121 6y ago
  > 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.
  - shripadk 6y ago
    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/ https://material-ui.com/api/input-base/ [2]: https://material-ui.com/api/button-base/ https://material-ui.com/api/button-base/
  - shripadk 6y ago
    Check this out and see if you find it actually hard to customize: https://news.ycombinator.com/item?id=23516513 https://news.ycombinator.com/item?id=23516513 ?
    - crubier 6y ago
      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.
      - shripadk 6y ago
        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.
        crubier 6y ago
        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.
- crubier 6y ago
  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.
  - crubier 6y ago
    Just as an example, the code for Button in both frameworks: ========================================== Chakra: 215 lines https://github.com/chakra-ui/chakra-ui/blob/master/packages/button/src/button.tsx 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/material-ui/src/Button/Button.js 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"`
shripadk 6y ago
Material UI actually is a lot better when it comes to customization. You can just override the provided component styles by creating ad-hoc CSS-in-JS styles and passing it as classes. This is apart from what Chakra UI provides. Both uses some form of styled-system but Material UI implements it better. Material UI provides an API to modify the styles of core components in any depth that you like. You do it through the `classes` prop. So for complex components like TextField which has an InputLabel, Input and FormHelper component you have corresponding props: InputLabelProps, InputProps and FormHelperProps which accepts a `classes` prop each. You can then create ad-hoc CSS-in-JS styles using makeStyle and pass them as classnames to the respective inner-components `classes` prop. You'll realize the advantage of this only when you try it out. Here is a quick example I created for you to try: https://codesandbox.io/s/material-demo-d2vmn?file=/demo.js:268-592 https://codesandbox.io/s/material-demo-d2vmn?file=/demo.js:2... The left side is a normal TextField and the right side is a TextField with styles overridden. If you do not like the TextField component Material UI provides you can always create your own with InputBase component. Edit: Hacker News isn't letting me post a comment to your comment so I am editing my comment here. Your example doesn't match mine. It just styles the component itself. Not inner components. For that you need a uniform API which neither Emotion nor Chakra provide. Please see my example again. The TextField component is a complex component comprising of InputLabel, Input and FormHelper. The idea is to style those inner components without actually breaking apart the source. We need a uniform API for that and neither Emotion nor Chakra provide something along those lines. Which is the crux of the argument on why Material UI is superior. It not only provides CSS-in-JS styling options like Emotion but also provides a standard API to style inner components no matter how deep in the tree they are. If you want to replicate the same feature you would have to create your own abstraction. But then that abstraction is not on the library level but your application level. So if someone wants to work on your app, they will have to learn your abstraction first. If they move on to another app they can't carry over your abstraction in case the other app doesn't have the same implementation. They will either have to learn the new implementation or create that abstraction from scratch leading to a lot of bloat. If I know some project is using Material UI I feel comfortable knowing that the API to modify a component and its inner components will be the same. That gives me a lot of confidence.
- 6y ago