Choosing Material Theme does not really look "Material UI" like?

[reyem]

Hi there,

I`m looking for a powerful component library for React following Material Design Guidelines. PrimeReact is functional very interesting. But I`m a bit confused, when it comes to Material Design look and feel. I have found 2 ways.

1.) you allow on your components menu to choose different "Material" Themes. But using them, does not really look like "Material Design". E.g. the input text is a box and not just a line like defined in Material Design.
2.) I found your "Sapphire" Template. This really has a Material Look&Feel. But actually I would only need components. The overall page layout we have done our own.

is there a Theme Option for #1 making it look like in #2? If not, can I use only components from #2 and put them into my own layout?

Thank you for clarification.

[cagatay.civici]

1) Material Design is updated by Google time to time, the line based inputs are long gone since they are not usable, they are deprecated by Google and we follow the latest specification.

Some resources;

https://material.io/components/text-fields
https://medium.com/google-design/the-ev ... 3688b3fe03

2.) If you have your own layout, then you just need PrimeReact itself, material themes are included. If you need to change colors with SASS, Theme Designer is the one you need. If not, you can just use the free material themes.

[pavel.tavoda@f4s.eu]

I have same problem, how to achieve animation. Label is inside element and when focused label is animated and moved to top.
Is here some setting which I'm missing? At least in https://primefaces.org/primereact/showcase/#/formlayout
there is no such example.

Thanks

[mert.sincan]

Hi,

Please see;
https://primefaces.org/primereact/showcase/#/floatlabel
(Note: you can try it with our Material Themes. I suggest you try configuration options on the left side.)

Best regards,

[pavel.tavoda@f4s.eu]

OK, that's what I was looking for, thanks.

[JosephWhitfield]

I have same problem, how to achieve animation. Label is inside element and when focused label is animated and moved to top.
Is here some setting which I'm missing? At least in https://primefaces.org/primereact/showcase/#/formlayout
there is no such example.

Thanks

Material UI is a component library for React teeming with powerful components that you should be using in your projects. If you're just looking to create a good looking app, Material UI can provide you with solid pre-styled components that will get the job done.

[mert.sincan]

Thanks a lot! Also, you can easily switch to Bootstrap, Material or custom themes on PrimeReact. Please see all options and Premium layouts in configurator menu.

We'll update all layouts and add new layouts according to Material, Bootstrap and custom design. Please see 'Premium Application Templates' section;
https://primefaces.org/primeng/showcase/#/ (There'll be the same layouts in PrimeReact.)

Best Regards,

[pavel.tavoda@f4s.eu]

Material UI is a component library for React teeming with powerful components that you should be using in your projects. If you're just looking to create a good looking app, Material UI can provide you with solid pre-styled components that will get the job done.

I know material UI component library very well. I used it for 3 projects already. Problem is with styling. MUI theming is difficult and fragile. Primefaces allow you to switch theme from Bootstrap to MaterialUI with one codebase. When are you developing generic framework for more customers you never know what they prefer. With PrimeFaces you are free from making this difficult decision (Bootstrap vs MaterialUI). Plus they allow some other looks. I also found very handy SASS layout sources provided for templates. I as developer don't have to care too much about details. Our graphics guys can tune whatever they like afterwards and they don't need me. Just update SASS compile and refresh -> new look, ...

[mert.sincan]

Hi pavel.tavoda@f4s.eu,

Thank you very much for sharing your experiments with us!!!

These feedbacks motivate us more.
Best Regards,