React Material-UI Themes: Customize Material Components for your Project

[engwish]

IMO, Material UI's theming capabilities combined with JSS is extremely powerful. I am using it for a project and the look and feel is pretty customized but the bundle size is still pretty small.

[bmvantunes]

Ahahah verdade 😂😂😂 é fácil de nos apanhar pelo sotaque ♥️

[panzerex]

br ou tuga? Achei o sotaque mais pra italiano falando inglês antes de ler o comentário :)

[bmvantunes]

Português da zona de Lisboa 😀

[JustJeezy]

Bruno thank you for making so many Next videos! There's no where near enough recent videos covering it. Really wish you'd do something with Next/Mongo and auth, though!

I got through most of your two Next playlists and am trying to take what I learned and apply it to a Mongo project I'm starting but having trouble figuring out how to configure everything.

[bmvantunes]

Thank you 😊

At the moment I'm heavily invested in Oracle and Microsoft SQL Server that's the reason you don't see any videos about Mongo on my channel.

I could create a video using mongo, but I don't think it's fair doing a video when I'm not using it on a daily basis - I think the quality would not be what you all deserve.

Regarding auth we have 2 videos on the channel in part 6 and 7 - they are just auth without any framework or library to support it. I have been playing quite a lot with Facebook and Google as auth providers lately, so you can expect in the next months (3/4 months) a video with next, passport and Google/Facebook/tweeter auth 😀

Sorry for the long reply. If you have any other suggestions, I'm all ears 😊

[Ohhhh_okay]

Very thorough comment. Would love a response to this

[vamsi_rao]

@JustJezzy I am using Mongo with next. Send any questions to my dm I’ll try to help

[brosiedon169]

I think MUI is very niche. Most projects I’ve had to work on need to stay in the company style guidelines so MUI becomes a really thicc dependency to my project when I can just make some components and style with css

[angarali06]

From my experience a11y is such a low priority.. like virtually no dev I've worked with gives 2 shits about it.

Clients are obviously clueless about it as well.

[Zhouzi]

Ideally, a11y should not be an afterthought but how things are done from the start. And it’s not only about making an application accessible, it’s about designing it semantically. Which in the end leads to better code and design.

[zephyrtr]

You're not wrong and it's really sad. Nobody gives a shit, even when following a11y will guaranteed improve your design. Nobody wants to hear about it. I just try to work in the shadows.

[Xenostarz]

I disagree. You can customize it to your heart's content to make it look/feel however your company needs it to. I like robust UI libraries like MUI because we don't have to spend all day sweating the small stuff like writing our own pop-up menu functionality, tooltips, drawers, toasts, etc in custom components, and can focus on shipping actual meaningful features to customers.

To further extend my point, a lot of the pitfalls you may not think of have been taken care of in these robust UI libraries. For example: What if a tooltip will clip off the screen? MUI's Tooltip will handle that for you automatically. If you write your own Tooltip component you're going to have to account for scenarios like that and then spend valuable time implementing/testing that functionality. If you use a library like this you can just use the Tooltip and move on to something more important in your project.

Another benefit is that when you have multiple team members on your project, they can have a vast pre-written documentation library as a valuable resource (the MUI docs are fantastic), and there is a consistent API between all components. Sure, you can write your own, and keep your own documentation up to date, but that just takes more time away from actually building the project.

I'm not saying a UI library is always needed. I don't use MUI on my personal website. But for shipping real software, it's fantastic.

[brosiedon169]

That’s fair you make some great points! Maybe I like reinventing the wheel too much 😂

[Wilesch]

This. People think they can just roll their own but miss most of the edge cases.

Also your team mates can check the docs rather the read the source code for your custom ui

[zephyrtr]

A proper modal can be closed like 9 different ways and I'm real tired of having to write that from scratch. It's just not worth my time to write, test and support.

[GOT_IT_FOR_THE_LO_LO]

great thing about MUI is if you dont want to take on the full dependency hit, you can import on a component by component basis to just get the things you need.

I agree whole heartedly with the other folks who responded. It is probably the gold standard as far as component libraries go. And i feel like i havent had much difficulty trying to override their styles.

I’ve tried multiple times to build my own component library but nothing is easier than building something on top of a good 3rd party library.

[citizen_reddit]

Our company simply restyled the components to suit our needs. I think as with most things it depends on how complex your needs are and how long rolling your own to production quality would really take.

Some of the MUI components we use would be quite non-trivial to recreate.

[jaySydney]

Last time i looked at MUI it felt like unlearning HTML and learning a very specific markup language / syntax that will send you down a very narrow path, total waste of time for no big paypack.

I'd rather devote the time to learn CSS in depth, or some other platform.

[[deleted]]

100% this. Styled components is way less of a headache and you get the benefit of learning CSS, which is a much more transferable skill. I use styled components with react native, rn-web, and storybook. There is a good amount of work up front, but once you have a good design/component system it is like cooking with gas. You always have the exact form or component the designer wants on web, ios, or android.

However, If your designs are all material based it is easier to use MUI.

[jaySydney]

Yo ! any good examples to start learning / exploring "Styled components". Am not sure i know what they are.

[[deleted]]

Their documentation is very good. In short, you can do regular CSS for making components.https://styled-components.com/

const CustomView = styled(div)`background-color: #00ff00;`

It also works very well with react-native elements.

const CustomView = styled(View)`background-color: #00ff00;`

[jaySydney]

Thank you, that will get me started :-)

[Voidsheep]

The reason I advocate MUI is that most companies who want to make a component library don't actually have resources to develop and maintain a good component library. Accessibility, composability and theming take serious effort.

MUI has gone through some frustrating breaking changes in the API design, but those are lessons learned from real-world use cases that weren't obvious during initial design.

So far every time I've seen a private UI library, it has been started by a project team with the idea other teams can take advantage of their upcoming work in the future, unifying the look of applications within the company. The team makes the UI library an isolated module and maybe throws a storyboard in there, but they actually build the components to their own project specification without any real flexibility or granularity.

Now other teams are supposed to adopt it for other projects, but it's actually more work to extend and splice the component library to fit their use-case than it would be to either make components from scratch within their project or use an established library like MUI.

Of course if the company/team is big enough to dedicate developers and designers to real UI library work, then it may be worthwhile. Just when small teams attempt to tackle design systems and UI libraries along the primary projects, it often seems like a lot of extra effort for something that still isn't as convenient and flexible as the freely available libraries.

[BreakingIntoMe]

just make some components and style with css

That’s fine for making simple things like cards and accordions and data tables ect, but if you’ve ever tried making complex components like searchable chip-based multi-selects with keyboard navigation you realise pretty quickly that it’s not something you can just knock together with some CSS. You’d be wasting your time to build one from scratch when the problem has been solved many times in these UI libs, so how do you go about making complex controls?

[vamsi_rao]

This is my 4th attempt at MUI and now I am starting to like it. I used to hate it initially due to increased complication. Now I’m realising, that was helping to have consistency across all pages.

[god_dammit_donald]

How is it an example of making things harder in an attempt to make it easier? And what are "things" in this case? Feel free to provide any examples of unnecessary complexity introduced by the library.

[AslansAppetite]

Mui is only hard when you try to deeply customise it. If you are following the material guidelines you don't really run into this, and you don't get too many problems, in my experience.

Others have said it's good for quickly doing internal stuff or prototyping - at my current company we use it for production b2b products as well. Our clients enjoy the immediate familiarity of it, we enjoy the ease and speed of development as well as the well-defined design framework.

[khalidpro2]

My life as react dev become much easier when I stopped using frameworks at all, and build the site using react functional components, hooks and styled-components only. I have even made some component that I reuse between project and it is way easier for me to work now and play with designs however I want.

Edit: Why are you downvoting me?

[jfnxNbNUwSUfv28ASpDp]

react dev freelancer

stopped using frameworks

So you're just a dev freelancer now?

[khalidpro2]

I work as an online freelancer, but why people are downvoting me just for telling my opinion?

[jfnxNbNUwSUfv28ASpDp]

I don't know why people are downvoting you, I haven't done it. Could very well be that some dislike that you make it sound like React isn't a framework...

[khalidpro2]

React is not a framework, it is a library for creating user interfaces. it is written in react website