5 ms·

As it happens, yesterday morning I tried using one for the first time in years. Material UI for React. Looked incredible, is very impressive, and yet within onl

As it happens, yesterday morning I tried using one for the first time in years. Material UI for React. Looked incredible, is very impressive, and yet within only 2 hours I ran into a scenario that couldn't be handled by the framework. This morning, I'm stripping out all of it and starting over from scratch, like I should have done in the first place. A caveat is that I love their color system, so I'm importing and using that, but leaving out everything else.

morgancmartin 6y ago
Would highly recommend Tailwind if you don't like the boxed-in nature of most frameworks. Tailwind is more of a design system than a CSS framework. It simply gives you guidance on establishing proper constraints of your design system and then a nice set of utilities to get started with. There is no "can't be handled" scenario in Tailwind. EDIT: And the book by the same author, Refactoring UI, is also a fantastic primer on the philosophy behind Tailwind.
- tenaciousDaniel 6y ago
  Refactoring UI looks awesome, thanks for the recommendation, will check it out. I've heard of Tailwind and I can't remember what the price tag was, but it made me raise my eyebrows a bit lol.
  - balfirevic 6y ago
    > I've heard of Tailwind and I can't remember what the price tag was It was (and still) is zero. Maybe you have it mixed up with Tailwind UI? (which is a paid library of ready-made components built using TailwindCSS framework)
isakkeyten 6y ago
out of curiosity, what was the scenario?
- tenaciousDaniel 6y ago
  Converting a tree-like structure into a nested form inputs. Material seems to be rather opinionated about what a "form" is, and I found it too constricting for my needs. More specifically, the TextField component assumes an accompanying label, while none of the other form components do. It seems like a very odd choice to me, since all form elements should have a descriptive label.
  - micael_dias 6y ago
    What input didn't have a label? I'm using mui in a webapp and didn't find any I couldn't add a label to.
  - mikewhy 6y ago
    TextField is already a composition of other components. The demo page for Checkbox (https://material-ui.com/components/checkboxes/ https://material-ui.com/components/checkboxes/) shows how to use them with labels, and also groups. Agreed there should be something included for CheckboxWithLabel, but to think it's impossible and the whole thing must be thrown out is a bit much.
    - tenaciousDaniel 6y ago
      Eh I wasn't super descriptive in my response, but it was connected to that. It wasn't that I didn't see a solution, it was more "how much effort modifying in a solution will take vs just writing it myself". I decided the latter was more cost-effective for my particular use case.

morgancmartin 6y ago

Would highly recommend Tailwind if you don't like the boxed-in nature of most frameworks. Tailwind is more of a design system than a CSS framework. It simply gives you guidance on establishing proper constraints of your design system and then a nice set of utilities to get started with. There is no "can't be handled" scenario in Tailwind. EDIT: And the book by the same author, Refactoring UI, is also a fantastic primer on the philosophy behind Tailwind.

tenaciousDaniel 6y ago
Refactoring UI looks awesome, thanks for the recommendation, will check it out. I've heard of Tailwind and I can't remember what the price tag was, but it made me raise my eyebrows a bit lol.
- balfirevic 6y ago
  > I've heard of Tailwind and I can't remember what the price tag was It was (and still) is zero. Maybe you have it mixed up with Tailwind UI? (which is a paid library of ready-made components built using TailwindCSS framework)

isakkeyten 6y ago

out of curiosity, what was the scenario?

tenaciousDaniel 6y ago
Converting a tree-like structure into a nested form inputs. Material seems to be rather opinionated about what a "form" is, and I found it too constricting for my needs. More specifically, the TextField component assumes an accompanying label, while none of the other form components do. It seems like a very odd choice to me, since all form elements should have a descriptive label.
- micael_dias 6y ago
  What input didn't have a label? I'm using mui in a webapp and didn't find any I couldn't add a label to.
- mikewhy 6y ago
  TextField is already a composition of other components. The demo page for Checkbox (https://material-ui.com/components/checkboxes/ https://material-ui.com/components/checkboxes/) shows how to use them with labels, and also groups. Agreed there should be something included for CheckboxWithLabel, but to think it's impossible and the whole thing must be thrown out is a bit much.
  - tenaciousDaniel 6y ago
    Eh I wasn't super descriptive in my response, but it was connected to that. It wasn't that I didn't see a solution, it was more "how much effort modifying in a solution will take vs just writing it myself". I decided the latter was more cost-effective for my particular use case.