Material UI Theme Override and Props in React JS [Global Styles]

Learn how global styles with Material UI Theme Override and Props can help you create reusable "brand components" for your project in React. In this Material UI tutorial, Kelsey walks you through every step to help you create more consistency with styling in your React project.

See the code examples from this video:

Notes:
One of the easiest and most common approaches to customizing Material-UI components is using props and classes for one-time use. These one-time-use components often evolve into reusable brand components. However, there's an alternative way you might overlook if you always reach for brand components.

In this video, we'll use global CSS overrides and default props in our theme to customize all instances of a Material-UI component in a project.

3 Key Advantages of This Approach
1. Our code will be more concise.
2. It will make our component styling consistent across our application and more portable across projects.
3. We will avoid breaking the Material-UI components' contracts.

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

Brand Components vs. Theme Overrides and Props:

What is a Brand Component? When developing apps with Material-UI, we often want to customize the appearance and behavior of Material-UI components. In customizing a component, we can make a "brand" component - meaning a Material-UI component with a thin component wrapper, applying classes, and setting props.

Brand components allow for reusability - but utilizing theme overrides and props has additional advantages:

1. Less code and fewer files
Component props are set in the theme's props and styles are set in the theme's overrides. This eliminates the need for brand component code and files.

2. More portable
When using brand components, if we want to use our customized components in another project, we have to move our theme and all our brand component files. When using theme overrides and props, we can simply move our theme.

3. Leaves the component contract intact:
In the example above, the props we intend to accept from the component's user are color and children. If the component's user is familiar with Material-UI components, they might expect to be able to pass in a component prop with the value "a" so the component is an anchor tag that looks like a button because component is a valid prop on the Material-UI Button. The BrandButton won't do anything with the component prop because it isn't in its props list. This could cause frustration for the user and result in your needing to update the brand component.

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

TypeScript Consideration
Material-UI has TypeScript support. If you wrap a Material-UI component in a brand component, you lose the component's TypeScript typing!

With the BrandButton, the type is a generic React FunctionComponent type.

When using the component directly and applying styles via theme overrides and props, the component type from Material-UI remains intact.

========================
💻More Dev Resources
========================

Best Practices and Tools for Managing Remote Development Teams

Level Up Your Development Team with Better Agile Retrospectives

Videos for Getting Started with React

========================
🎙Dev and Design Podcasts
========================

Even-Keeled

Seaworthy

========================
📱Connect with us:
========================

Instagram

Twitter

LinkedIn

[naufalzufar]

I hope you increase font size in the next video, its hard to see it in mobile phone in lower resolution 👍

[jesselopez]

beautiful! tutorial:). Seriuosly tho. If you had a full udemy material ui course i would buy.

[ravalravi]

Omg Really Awsome, I was Under ther assumtion That antd is better then material UI .. Now I am Confussed which One Should i Use..

By The way Thank you ma'am😊

[gaelguyon]

Great video ! I have been meaning to add custom icon to replace the one in Select component across the whole application but I cannot seem to find the right way. Any idea ??

[CodeDreamer]

Suggestion: Zoom in or increase font size to accommodate smaller screens, especially when presenting code in VS Code. YouTube watchers often watch videos on their phones.

[snakeb]

I liked how you first did the branded component thing then showed the better alternative. I bet a lot of devs who use mui have a bunch of wrapper components for their Mui components just to apply custom styles. So instead of wrapper components, it's best to style the general config then import the Mui components straight from Mui.

What about when you need styles for specific use cases. Often times it'll be positioning containers or flexbox. What would you use for that? The sx prop or maybe tail wind to reduce the lines of code.

[praffulpatil]

Amazing content this added on to my understanding to whole next level

[nonamed-]

Thank you so much for this video, it was really helpful for me, I've watched some similar videos but this one is fantastic. Keep up tthe good work.

[rajugangadhar]

What sets this video apart is, the transition of achieving the same results by novice methods and then incrementally teaching how to go professional! Thanks for the tutorial Kelsey!

[iBulowHD]

Nice tutorial, thanks for going in depth with examples, and not ending the video after the first one. Kudos

[toannew]

thank you so much. I really need this tutorial

[dikiagungmustaqim]

cool!. thank you for creating this tutorial

[rogueriver]

This is excellent! Thank you for using the documentation in the video. Half the challenge as a beginner is deciphering documentation!

[NSWMods]

const headway = ({Thank u}) => {
return <div> One of the Best Material ui Tut I Have Seen on Utube</div>
if(Headway) {
Tut Like This I join
} else {
Stop Coding
}

[snakeb]

as of 2023, I think you have to do the overrides by putting it in the createTheme objects. like:

createTheme({
components: { MuiTextField: {styleOverrides: { root: backgroundColor: 'red'....

[aaron___]

Besides having the cool checkboxes and radio buttons this seems like an overly complicated and restricting way of making basic HTML components. What am I missing?

[lucas.sgomide]

Thanks for the video, im starting with the MaterialUi lib and this was really helpful, now I can understand the MUI API better!

[zeno_aratus]

excellent tutorial - well prepared, straight to the point, precise, clear working side by side example - this is a great template for tuts and I dont have to waste my time listening to someone prattle on semiprepared - geez is youtube polluted with crap tutorial videos of that mold. Excellent please do more tuts

[toannew]

please more videos like this which is very useful and understandable.

[toddcagelives]

this took me an hour to get through but it helped a ton with a project I'm working on - thank you