Material UI Theme Override and Props in React JS [Global Styles]
HTML-код
- Опубликовано: 15 сен 2024
- 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:
headway.io/blo...
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
bit.ly/tools-f....
Level Up Your Development Team with Better Agile Retrospectives
bit.ly/level-up...
Videos for Getting Started with React
www.youtube.co....
========================
🎙Dev and Design Podcasts
========================
Even-Keeled
bit.ly/even-kee...
Seaworthy
bit.ly/swthy-pdcst
========================
📱Connect with us:
========================
Instagram
bit.ly/follow-...
Twitter
bit.ly/follow-...
LinkedIn
bit.ly/follow-...
![Shipwright 2.0 - Free Figma UI Kit Design System Updates for 2023 [Link in Description]](http://i.ytimg.com/vi/rRGNdPOfplU/mqdefault.jpg)
![Shipwright 2.0 - Free Figma UI Kit Design System Updates for 2023 [Link in Description]](/img/tr.png)
![Intro to React Database Connections [Sync Data to Your React App]](http://i.ytimg.com/vi/HVdMhKN2ng4/mqdefault.jpg)
Want access to the code snippets? You can follow along with the video right here in Kelsey's blog post 👉 headway.io/blog/global-styling-with-material-ui-theme-overrides-and-props
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!
Nice tutorial, thanks for going in depth with examples, and not ending the video after the first one. Kudos
Good to hear! Kelsey is a great teacher and we're glad she's on our team.
This is really good! I like how it's a demo of something simple, not having too much lines of code to showcase on how to do it. Easy to absorb.
Glad you found it helpful and we appreciate the feedback!
Now this video makes me wanna use MUI for my projects. Thanks!
This is excellent! Thank you for using the documentation in the video. Half the challenge as a beginner is deciphering documentation!
Happy to help! Kelsey is the best! Be sure to subscribe to stay up to date on future content from Kelsey and the Headway Development team.
Also, be sure to check out the blog post that shares everything in detail as well - headway.io/blog/global-styling-with-material-ui-theme-overrides-and-props
So straightforward, clear, and to the point. Subscribed. 🎉 Thanks for sharing!
We appreciate the positive feedback! And thanks for subscribing Jason!
this took me an hour to get through but it helped a ton with a project I'm working on - thank you
Glad Kelsey was able to help!
Amazing content this added on to my understanding to whole next level
We appreciate the feedback!
please more videos like this which is very useful and understandable.
We appreciate the feedback!
What about it did you find most useful?
@@headwayio the most useful for me are some concepts which are withStyle, classes = {root: classes.root, secondary: classes.secondary}, props (children, classes...) and the global style in theme, among others.
Thanks for sharing that!
Thanks for the video, im starting with the MaterialUi lib and this was really helpful, now I can understand the MUI API better!
That's great to hear!
Awesome indeed ,very informative and useful ,please add more content ,this channel deserves more subscribers
Thank you for those kind words! We plan on creating more and look forward to publishing more than we do now.
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😊
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.
Great to hear! Kelsey is a wonderful teacher.
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
We appreciate that feedback!
thank you so much. I really need this tutorial
Glad we were able to help!
Excellent video! On point, clear and precise. Thank you! 👍
Thanks Dennis! We appreciate that.
very nice explanation, thankyou!
We appreciate the feedback. Glad you enjoyed it.
cool!. thank you for creating this tutorial
You bet! Happy to help.
Wow. She shows parts that I have been looking for at the internet forever. Amazing tutorial. Where can I find more videos like it? So easy to follow and understand. Wow again. Thanks.
const headway = ({Thank u}) => {
return One of the Best Material ui Tut I Have Seen on Utube
if(Headway) {
Tut Like This I join
} else {
Stop Coding
}
Love this!
@@headwayio Thank u for your reply please Have a Awesome day
You as well!
@@headwayio O. Yesss Only a few hours to go and My working Weeks over with Have a good night to over there and be safe Aswell
Thank you, it was really helpful
Glad to hear that Kelsey was able to help!
I hope you increase font size in the next video, its hard to see it in mobile phone in lower resolution 👍
We’re always trying to find better ways to present. We appreciate the feedback. 🤗
Its hard to see on a computer monitor.
That was great. You are a great coding inspiration!
Glad you found it helpful. Kelsey is a great teacher!
Very elucidative
This was a very very helpful Video! Thank you a lot!
Awesome! Thanks for the feedback. 🙌
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.
We'll share this question with Kesley and see if she has feedback for you! Thanks!
Here is what Kelsey shared:
John, if I'm understanding your question correctly, you're describing the varied layout use cases you might have for a component. In React component development, I let the parent component control the layout of its children rather than allowing the comment to dictate its own placement. When it comes to layout I favor grid placement (‘display: grid’) but any of your suggestions could be good solutions.
Hope that helps.
Allowing the component**
@@headwayio right that makes sense. We shouldn't even be using styles like flex, padding, margin, width etc. Thats a red flag that we should be using an MUI component: Grid for flex, spacing for margin/padding, cols for width etc.
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 ??
Suggestion: Zoom in or increase font size to accommodate smaller screens, especially when presenting code in VS Code. RUclips watchers often watch videos on their phones.
We appreciate you and this specific feedback! We made this video a while ago and are always looking to improve the free content we share and how we present.
I'm watching on a 1440p screen and can barely see it. The contrast between the black ide and white browser, eye-strain-city.
Awsome vide!
Thanks. It was really educational for me.
You’re welcome! Glad you enjoyed it. Kelsey is a great teacher!
Thanks for amazing tutorial!
Kelsey is the best! Glad you found it helpful.
Thank you so much! You're a life saver
You’re welcome! Glad we could help.
beautiful! tutorial:). Seriuosly tho. If you had a full udemy material ui course i would buy.
Great tutorial. Thanks a lot.
thank you!! this helped me in my project
Good to hear! Thanks for watching.
Thanks for the help
You bet!
A very useful video. The problem with libraries is when you don't want what they consider to be "primary". Bootstrap was so homogenous that everything looked like cookie-cutter templates. What if you want a brownie? You helped explain how to make your own themes and custom components which I plan to implement in React and Next app. Many thanks, M
Good to hear! We appreciate the feedback. Kelsey is one of our favorite teachers. 🤗
awsome vieo ma'am kepp it up
Good to hear you enjoyed it!
hello, thank u for ur explanation. The question....can we do the same manipulation....i mean set textColor and bgColor the same as by Button Component but with Paper Component or Card (some wrapper)
Hello and thank you Lena! Kelsey said, “yes, it works for all MUI components.”
Thank you! Learn a lot.
You’re welcome! You can check out any of the notes and find the source code from this video here: www.headway.io/blog/global-styling-with-material-ui-theme-overrides-and-props
Great tutorial 👍
Thanks for the feedback. We appreciate it!
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?
That was a great video ❤
nice!
Amazing! Thanks :)
You bet! Happy to help. 🤗
Thank you for save my life \o/ . i'm back end programer and i m not good with styles .
Glad Kelsey was able to help!
I owe you one!
Hi, can you do a tutorial on how to test material ui componets..?
It's a possibility! We are planning content for the new year now and we can share this with the team. Thanks for sharing.
In the meantime, check out this resource here: material-ui.com/guides/testing/
You should start to use TypeScript. 😊
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'....
Any plans to update/redo this to MUI v5?
Probably not. Kelsey has moved on from our team to bigger and better things!
We understand that some videos will be outdated due to frameworks updating over time.
In love so easy, with development i mean..
I am very surprised why most of the RUclipsrs think about the font of the editor. Font is too small that I can't even read on my mobile what is written over there.
We are looking into better ways to present and screen share for our videos. Thanks for the feedback!
Hello mam, can I connect you personally I need a help from you please mam?
withStyles??? who uses withStyles in 2020? thought makeStyles was supposed to replace clunky withStyles.. Unless you still using class components than I`d understand, but everyone migrated to hooks long time ago and I see no point using withStyles...
Sorry for any confusion here. If you watch the whole video, the point is by using theme overrides you don’t have to use makeStyles or withStyles. Check out the full walkthrough with notes here - www.headway.io/blog/global-styling-with-material-ui-theme-overrides-and-props
This video wasnt very helpful to me :-( You show what to do, but not why. So I still have no clue how to use material ui in my project :(
I'm connecting with Kelsey to provide an answer for you.
Thank you very much, but video quality is bad
We appreciate the feedback. This recording was from a zoom live stream event. We have plans to improve the quality of our recordings this year.