I couldn’t pass here without saying that this video is awesome, this kind of customization helps to maintain the code architected and simple to add new features on front end, thank you very much for the amazing content 👏🏻👏🏻👏🏻
Ahahah thank you 🤣 I used very ugly and strong colours to focus people on the content itself, not the design, but probably it was a mistake on my side 😅😅😅
@@BrunoAntunesPT Just finished the entire playlist, content is so well balanced and thought out I come from design background and I understood EVERYTHING! Thanks again!
This video couldn't have come at a better time for me. I was torn between Ant Design and Material UI for a project I'm just starting to work on, and how easy Material UI seems to customize definitely sold me on it. Thank you!
I think material UI is everything I have ever wanted in a UI framework, nice semantic markup that's simple, well thought out and open to customisation.
Thank you very much Çağrı I'm really glad you found this video helpful =D In the past I've struggled quite a lot with material themes.... now that I know how to use them properly I thought it would be nice to save other people from that pain =D
Oh lordy, this is going to come in so useful. I can't thank you enough. This is going to come in so useful at work. I look at the Material UI docs nearly everyday and the theming section is so confusing. I would've never found out you could do this with Mui. Can't thank you enough for levelling up my Mui skills 👏🏾👏🏾👏🏾👍🏾👍🏾👍🏾 I can't believe how easy you made it 😯
Thank you Steve, I'm so glad you found it useful! =D It took me quite a while the first time I had to deeply customize material-ui for a company, I have to be honest =D
Thanks very much for the clear instructions and the relevant examples! I’m new to Material UI (and front end in general) and have found the docs too terse for me to understand how to use their examples with the theme. Really helpful! ❤️
Thanks for that, man! You saved me a lot of time! Your explanation is quite simple to understand and covered a lot of content at same time. Thanks again!
Супер. Наконец я нашел хорошее объяснение кастомизации темы в material-ui (интуитивно понятно, что говорит автор, хоть я португальского никогда не изучал и не слышал). Спасибо
I don't speak Russian, but Google Translate was my friend =D Thank you very much for the comment my friend. I'm really glad that you understand me with my Portuguese accent =D It's very hard to remove my Portuguese accent - Trust me, I'm trying... :D
Bruno, you are awesome! You are providing so much valuable content with excellent explanations and perfect pace! Wouldn´t that be enough, your attitude is absolutely delightful! So: Thank you so much!! Take care and stay like you are!
Thank you my friend 😊 I'm really happy knowing the video helped you. If you want to see something specific related with material-ui let me know and I can plan a video about that ♥️♥️
Great video Bruno. I use Material-ui a lot (with React) it is my favorite CSS framework but I still find it is a lot of work customizing colors.This helped a lot!! Material-ui is great when you understand it more deeply, there is a lot to it.
Thank you 😍😍😍 I completely agree with you. The first times I used material-ui I didn't like it that much to be honest... only when I forced myself to learn it properly I started to love it 😅 nowadays is one of my favorite tools. If you have something about material you would love to see a video about, let me know ♥️
@@BrunoAntunesPT I have been using Framer Motion for my React animations and I tried to make them work with Material-ui components but I don't think they work well together. Any interest in trying that out? I also want to make a nice image gallery with Material-ui. ..Since you asked Brother ... lol thanks Bruno
I did not know about Framer Motion - it looks quite good =D I used in the past gsap (greensock.com/gsap/) Do you have any preference between the two? (if you have ever tried both) =)
@@BrunoAntunesPT I have not used GSAP, i have used React Spring and React Slick. I have been hearing about Framer Motion in the React community for about the last 6 months and it seems to be getting very popular so I started using it and i like it. I think all of these packages are very simple to use. I just want one tool that can handle all my animation needs and Framer seems to be a good candidate for that. I try to use mainstream technology as much as I can so when I join a new team my hope is everyone is somewhat familiar with the same tools, that's very hard but we have to try. Ramp up time ...
I think that's a really good approach =) If you use the most "commonly" used technologies the chances of landing in a team using those is quite high =D
@@BrunoAntunesPT I'm having trouble getting the overrides and props to take-effect. When I go to change the rules directly in the dev-console, the rules apply to: ``` @media (min-width:600px) { .MuiContainer-root { padding-left: 12px; padding-right: 24px; } } ``` What is the approach with this extra context spec?
I don't know what you mean just by reading your comment... Can you share a codesandbox with an example featuring the specific customization you want? If you can please tell me what you want to achieve, I'll try to help =)
@@BrunoAntunesPT In a nutshell, I was wondering if my css specifications are being ignored because I need to specify a media context? I have some of the theme specs working, but not all of them. I'm troubleshooting accordingly. The MuiContainer seems a little tricky because it appears that it reads settings that depend the breakpoint...It would be great to learn more about how to use the dev-tools to work through how the final css rules are applied.
I'm not sure but I think I got your question 😃 The only two properties you should have to "override" using the media query are the padding-left and padding-right. In order to override those 2 properties you can do something like this: ``` import { createMuiTheme } from "@material-ui/core/styles"; // defaultTheme just to access the breakpoints const defaultTheme = createMuiTheme(); // Create a theme instance. export const theThemeYouWillUse = createMuiTheme({ overrides: { MuiContainer: { root: { background: 'red', // this will work in all screen sizes [defaultTheme.breakpoints.up("sm")]: { paddingLeft: defaultTheme.spacing(3), // same as 24px (8*3) paddingRight: "99px" // or use any value you want } } } }); ``` You can also see that we are overriding the background colour without needing to use any media query because the component doesn't have any media query for the colour. Component source code: github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Container/Container.js Let me know if this is what you were looking for 😃
Verrry helpful that you break down the fundamentals of where these generated class names come from, that was a head scratcher lol. Not sure if you've gone over it but I also get confused by the pseudo-classes like :hover and :disabled if you are open to tackling that. Thanks for making this video :)
Hello Bruno, first of all, I'm really glad for catching one video of yours on my recommendations! I'd like to see a video explaining the $ruleName and pseudo-classes in Material-UI. I can achieve some examples, but sometimes I get lost on some stuff. Keep going with the good work!! Um abraço de Portugal !!
@@BrunoAntunesPT Obrigado pela resposta! Nos exemplos do Material-UI para substituir alguns estilos temos: '&$disabled' (sem espaço entre o & e o $) e às vezes existem exemplos onde há um espaço. Os exemplos normais de :hover e assim, são sempre colados ao &, e nisso nunca tenho problema. Mas por vezes não entendo alguns exemplos que eles têm. Quando queremos alterar a classe disable, no root, eles usam a pseudo-classe $disabled e depois no makeStyles criam uma classe disabled vazia, e na prop classes atribuem a classes.disabled a essa classe 'vazia'. É mesmo necessário efetuar isso? Eu normalmente crio uma classe com o makeStyles e passo através da prop className, é isto o mais recomendado? Ou convém usar mesmo a prop classes de cada componente e alterar os estilos desse componente por essas opções? Espero ter-me feito entender xD mas continua com o bom conteúdo, porque Material-UI para React é mesmo lindo ahah
Por exemplo: material-ui.com/components/steppers/#customized-stepper Nessa customização já tem: '& $line' com o espaço, e não entendo exatamente o porquê. Abraço!
Sim eu acho que percebo a tua confusao - se eu responder a tudo menos a tua confusao por favor diz-me que eu irei reformular =) Relativamente a primeira parte, ambas as maneiras que utilizas para fazer customizacao de componentes sao validas e ambas descritas aqui: material-ui.com/customization/components/ Relativamente ao espaco e nao espaco e' relativamente facil de explicar =D Basicamente, se tiveres: root: { '&$bruno': { color: red; } bruno: {} } O css gerado sera (esquecendo a parte random que eles geram): .root.bruno { color: red; } Por outro lado se fizeres: root: { '& $bruno': { color: red; } // repara no espaco entre & e $bruno bruno: {} } O css gerado (mais uma vez sem contar com as classes random que eles geram): .root .bruno { // repara no espaco entre & e $bruno color: red; } No primeiro exemplo, queres um elemento com ambas as classes, por exemplo , e no segundo exemplo queres um elemento com a class "bruno" que tem um pai (pode ser avo, bisavo etc =D) com a classe "root", por exemplo Relativamente ao porque de eles utilizarem os $, isso e' uma "heranca" deste plugin: material-ui.com/customization/components/ Espero que tenha respondido a tua pergunta, caso nao tenha respondido diz-me que pode acontecer eu ter percebido tudo mal =D
ffs finally someone with brain who actually explains how does this sht works below the surface... usually some 500k sub channels and React/UI "Wizards" just make 1h video and just copy pasting buttons and changing color="primary" ohhh look now u can make it color="secondary".... ohhh ok lets seee now we can add some text and make it look like h1... and finally copy paste whole navbar... ... Thank you mate...
Thank you my friend 😀 At the moment I'm using nextjs for almost everything. Being honest I can't think of any time I touched express for the last 2 or 3 months 😅
I know my friend and I'm really sorry for the lack of videos lately. Please accept my apologies 🙏🙏🙏 Hopefully things will get better here in London after the 4th of July ♥️♥️♥️
Customizing Material UI has always been a nightmare to me ( especially the fucking text fields ) this video made things a lot more clear and taught me a lot of new things so Thank you from the heart 🌹🌹🌹
You have an awesome personality and your teaching is very informative. Your video teaching would be better if you clearified how the customization settings corispond to the Material ui settings that are being changed so I can clearly imagine how it is working.
Thank you very much my friend 😀😀 Thank you also for the feedback on what to improve, it is very very welcome John 😍😍 can you give me an example of a setting that you would love to see better explained? 😀😀
Muito obrigado Romulo =D I've been playing quite a lot with Facebook and Google Auth lately for an app I'm doing. I'm doing everything manually at the moment, probably soon I'll move my app to use passport =D When I feel I have everything polished to show I'll publish a few videos about Auth providers like Google/Facebook/Microsoft etc =)
That's awesome!!! Honestly I'm really really close to move to passport, but for now I want to implement everything manually - this is a personal app I'm doing during the weekends, not for any client or company so I'm taking it as a learning experience even if it takes much much longer for me to complete it =D If this was a production app most probably I would just throw passport into it and move on =D
@@llSalazarll passport is pretty self-explinatory (at least I feel that way). On top of that, Google's OAuth API has some great charts to illustrate the entire process, that might help! But yeah hands down Social Login could be a great video Bruno!
Oh Davi 😍😍 so good to read your comment, thank you very much 😃 I'm improving my animation skills at the moment - I have to assume I'm not good on it at this stage 😅😅😅
Hey Bruno. Material and Ant design seem to be the most popular ones. I like react-sematic-ui the most for now. Just found a few components there that the other ones don't have. Just wanted to comment. Have a nice day
Thank you Felix =D I don't have any specific video just explaining makeStyles, but during the car trading playlist I used it a handful of times =) If you are interested, the playlist URL: ruclips.net/p/PLYSZyzpwBEWTt-0uuxAcSrJmMlnD9Yuz3
You can watch even without deep typescript knowledge 😊 but of course it would help if you know some typescript 😊 If you have any question(s) regarding typescript let me know 😊
@@BrunoAntunesPT do you know if it's possible to override styles that are set within media queries, I need to override muicontainer-fixed rules that have a max-width at each breakpoint.
Great video Bruno. Does it make sense to wrap MUI components like MuiButton which will have default props and styling set for an organization to be reused, but now it seems like theme can do those. Do you see any scenarios where wrapping MUI components is useful?
Just subscribed, you got many good points that I took a lot of time to understand, The props part I didn't even know... I want to ask: How you manage multiple themes? My company has a project that uses 3 colors as base, but when I change it to the black theme it turns to 2, I truly got lost in how to effectively apply these colors without changing all components individually.
Thank you very very much ❤️❤️ I'm actually planning a theme changer and dark theme video for next week. Your use case seems quite interesting. Can you describe a bit more in detail your use case? I would love to present something that can be useful also for your use case 😉😉
I never had that need/use case, so I never did any investigation on that... That being said, I think probably you can't (I can be absolutely wrong here). My assumption was made just by looking into the typescript definition file (.d.ts): ``` export type Variant = | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline'; ``` If you are using typescript I'm tempted to say maybe not (from this 2 minutes investigation)....... but again I can be 150% wrong here and probably I am!!! =D
@@BrunoAntunesPT You actually CAN extend anything in Theme. material-ui.com/guides/typescript/#customization-of-theme I for example created a hideOnPrint mixin, to easily hide elements when printing: codesandbox.io/s/eager-zhukovsky-je3bo
Bruno Antunes thank you really! I’ve been asked to edit some input fields at work and most of them are from Material ui, your video really helped me a lot 💕
That's great to hear 😀😀 The idea behind the select component is the same we did for the input fields. We use the browser to check the classes that are being applied and override them, like we did for the input field 😊
Hello Bruno, Thanks for your helpful videos! i have one problem can you help to me ? How to get equal width of TextFields and Select (FormControl) fields in Material Ui? Thanks before!!
Thank you my friend 😀 They both have a property if I'm not mistaken called fullWidth 🙂 With that property they will grow to the size of their containers 😀 then with the grid component, you can make the container any size you want 🙂
Amazing video. I'm using also theme for MUI, but I'm very confused about the difference between eg MuiButton & MuiButtonBase. This not clear at all in the doc. Any clue?
Thank you my friend 😀 Around 18:40 I show how you can use the browser developer tools to check the class to override. That method works for every component you want to override 😊 Let me know if after using that method it helped you 😊
@@BrunoAntunesPT I got it for sure. My question is more an "architectural" one. "MuiXXXBase" classes seem more focued on basic events with a very minimalistic styling whereas the "MuiXXX" classes have more embedded default styling. MuiXXXBase component are probably more useful when using another styling library (such as styled-components). But this is an assumption
Well... as always.... it depends what you want to do :) For example, the MuiButtonBase class is also used for checkboxes... so if you override it like: const theme = createMuiTheme({ overrides: { MuiButtonBase: { root: { border: "5px solid yellow" } } }, }); You now have all buttons doing what you probably want. Sadly, checkboxes now have a round border of 5px and yellow. If that's what you want, that's good news... but sadly I don't think that's what you wanted... 😊 As I said in the beginning of this comment, it really depends on what you want to do, sometimes it may be useful to override props of the Base components... 😊 For example, if you want to disable all ripple effects in your application then you may want to do this: const theme = createMuiTheme({ props: { MuiButtonBase: { disableRipple: true }, }, });
These is an awesome tutorial, real key informations for production. keep up the hard work. i just have one question pls. the design you on the mui elements will be applied to all the material ui elements but what if my app has two or more types of buttons and i would like to create multiple variants for the same btton (one with color blue and the other with color black) how could i procede i this situation? thank you in advance
Here you have an example, when you change the primary and secondary colours your buttons colours will update with them 😊 material-ui.com/customization/palette/
@@BrunoAntunesPT i made some research and found out that in material ui version 5 they will be prividing a way to create new custom variants of MUI components but it's a beta so i avoid using it for the moment. Actually the best solution i found for this issue is to create a file containing a makestyle function in which i create my own css. What i ended up doing is setting the commun style between all my buttons in the app, then i create other classes each one containing specific css values of each of my button then when calling the mui bottons i just concat the root with one of the other classes with clsx. And i could maybe use this files in other projects. Of course i'm using the theme too. And that's it. I'm actually not sure if this solution is good but i found it to be convenient for the moment. I really would like to have your oppinion on this and thx again bruno 😁😁
Thank you Muhammed =D I will try to find some SEO expert to work with me on that one. I don't want to share information that can potentially be wrong. SEO is a really really complex subject - it's one of the subjects I'm not good enough and my knowledge has a lot of gaps that I need to improve =D
have a look at this ... I had this in my bookmarks for later use : dev.to/jfelx/how-to-make-a-static-blog-with-next-js-2bd6 SEO included Just use this tutorial and so Bruno isnt overloaded with request^^
@@BrunoAntunesPT oh then please make about blog or anything series like car traders. And thanks for making video and i don't want to force anyone i like your video then i requesting and giving hint only
I looked for this in the official MUI documentation but I was very dizzy, but with this video it's very easy to understand and saved my time, thanks.
I'm very happy the video helped you out Renal 😀😀 thank you 😊😊
I couldn’t pass here without saying that this video is awesome, this kind of customization helps to maintain the code architected and simple to add new features on front end, thank you very much for the amazing content 👏🏻👏🏻👏🏻
You are amazing Washington!!! =D
I'm really glad you liked it!
As a designer the color hurts my eyes but what an amazing video, this is exactly what I was searching for! Thanks
Ahahah thank you 🤣
I used very ugly and strong colours to focus people on the content itself, not the design, but probably it was a mistake on my side 😅😅😅
@@BrunoAntunesPT Just finished the entire playlist, content is so well balanced and thought out I come from design background and I understood EVERYTHING! Thanks again!
Thank you very much for the kind words 😍 I really appreciate it my friend 😍😍
I've never been hit with so much value in such a short time. Nice one Bruno, thanks! New sub :)
I'm so glad to read your comment, thank you very much for the feedback Othneil :)
Also, thank you very very much for the subscription my friend =D
I love how you taught very clearly and straight to the point while absolutely destroying every design rule. You got my sub
Ahhahah I'm very good destroying amazing design systems, trust me!!! 😂😂😂
I'm very happy you enjoyed the video 😍😍 thank you ❤️
I'm a designer and I was skeptical about Material UI too. Now, you convinced me. Thanks!
I'm happy I was able to convince you 😍😍
Thank you very much for the feedback my friend 👍👍
This is the best explanation of theming for MUI I've seen so far. Great work, Bruno! :-)
Wow that's amazing to read 😀😀Thank you 😊
maaan your energy is just Wordless! I am very thankfull that I found your channel!
Thank you Mark 🙂
This video couldn't have come at a better time for me. I was torn between Ant Design and Material UI for a project I'm just starting to work on, and how easy Material UI seems to customize definitely sold me on it. Thank you!
Thank you =D
Looks like I read your mind eheheh =D
Nice! U completely nailed the theme customization on Material. Such amazing framework really, it is very much customizable.
Thanks a lot! 😃😃😃😃
I think material UI is everything I have ever wanted in a UI framework, nice semantic markup that's simple, well thought out and open to customisation.
I 100% agree with you. Material-ui is amazing =D
Thanks a lot for the knowledge, I was confusing why people keep telling me Material UI is highly customizable and this video proof me :)
I'm very happy reading this 😍 thank you
Material is indeed quite customizable, I love it😊
Great video and great job explaining, Bruno! I didn't realize it was so easy to customize MUI components in your theme like that!
Thank you 😀 material is one of the pieces I love the most currently 😍😍
Thanks for the thorough explanation Bruno
Thank you Christian 😀😀
Wow, one of the best tutorials I've seen hands down in a very long time. Thanks so much for this!!
Thank you so much for your words 🎉❤️
We should have seen sth about this topic in youtube. Here, Bruno did it again.👍🏼 Thanks again for clear and simple explanation.
Thank you very much Çağrı
I'm really glad you found this video helpful =D
In the past I've struggled quite a lot with material themes.... now that I know how to use them properly I thought it would be nice to save other people from that pain =D
thanks so much for the video! i've been reading up on material ui for the last 3 hours and you gave so much info in such a short amount of time
It was soooo good to read your comment 😍😍 I'm very very happy, thank you 😊
I can not stress this enough how concise and helpfull this tutorial has been for me, You saved me hours of work in just 20 odd minutes. Thank you sir
Soooo happy knowing this 😀 that's amazing!! Thank you 😀
Thank you Bruno! You've saved my time and made me enjoy Material-UI more and more!
That's amazing to hear! =D
Thank you very much =)
Oh lordy, this is going to come in so useful. I can't thank you enough. This is going to come in so useful at work. I look at the Material UI docs nearly everyday and the theming section is so confusing.
I would've never found out you could do this with Mui. Can't thank you enough for levelling up my Mui skills 👏🏾👏🏾👏🏾👍🏾👍🏾👍🏾
I can't believe how easy you made it 😯
Thank you Steve, I'm so glad you found it useful! =D
It took me quite a while the first time I had to deeply customize material-ui for a company, I have to be honest =D
A complete tutorial series of React Material UI is going to be great
I'll do more videos as soon as material v5 becomes the stable version on npm 😊
at the moment v5 is on beta 😊
Thanks very much for the clear instructions and the relevant examples! I’m new to Material UI (and front end in general) and have found the docs too terse for me to understand how to use their examples with the theme. Really helpful! ❤️
Thank you very much 😍😍
Thanks for that, man! You saved me a lot of time! Your explanation is quite simple to understand and covered a lot of content at same time. Thanks again!
Thanks you André 🤗
Great video Bruno, very informative and clear.
Thank you 😊😊😊
Hi Bruno! Just stumbled upon your video. Really appreciate your style of presenting. Great content. Hat off! Subscribed. Keep it coming.
Thank you very much my friend 😀😀
Brilliant!! Very well presented and in a comprehensible format.
Very nice tutorial, aways liked material UI but everytime i struggled with costumization, this helped me a lot
Thank you! Great to hear that! =D
Супер. Наконец я нашел хорошее объяснение кастомизации темы в material-ui (интуитивно понятно, что говорит автор, хоть я португальского никогда не изучал и не слышал). Спасибо
I don't speak Russian, but Google Translate was my friend =D
Thank you very much for the comment my friend. I'm really glad that you understand me with my Portuguese accent =D
It's very hard to remove my Portuguese accent - Trust me, I'm trying... :D
Bruno, you are awesome! You are providing so much valuable content with excellent explanations and perfect pace!
Wouldn´t that be enough, your attitude is absolutely delightful! So: Thank you so much!! Take care and stay like you are!
Thank you Dennis 😀 you are very kind my friend 😍 thank you, thank you, for all the support 😀
I hope you are having an amazing day 🤩
Thank you Bruno I was struggling on building a maintainable theme for my project and your video is helping me a lot !!!
I'm very happy reading your comment Nicolas 😀😀
Thank you very much for the feedback my friend 😊 I hope you find more videos you like on the channel 😊
Thanks bruno, your tutorials are always on point and really useful !
Thank you my friend 😍
Nice one, I always having issue while customizing material-UI it solved my issue. Thank You.
Thank you my friend 😊 I'm really happy knowing the video helped you.
If you want to see something specific related with material-ui let me know and I can plan a video about that ♥️♥️
@@BrunoAntunesPT sure. And thanks again
Thank you 😍
amazing stuff! extremely clear and concise!
Thank you 🙂🤗
Super useful video Bruno. I hadn't found any videos explaining this in such a great detail, so thank you.
Thank you my friend, glad it was helpful! =D
Very nice. I've used mui for a while now and still found a lot to learn in your video. Thank you.
Thank you ☺️☺️
Very nicely explained! Thank you so much!
Thank you 🙂
Great video Bruno. I use Material-ui a lot (with React) it is my favorite CSS framework but I still find it is a lot of work customizing colors.This helped a lot!! Material-ui is great when you understand it more deeply, there is a lot to it.
Thank you 😍😍😍
I completely agree with you. The first times I used material-ui I didn't like it that much to be honest... only when I forced myself to learn it properly I started to love it 😅 nowadays is one of my favorite tools.
If you have something about material you would love to see a video about, let me know ♥️
@@BrunoAntunesPT I have been using Framer Motion for my React animations and I tried to make them work with Material-ui components but I don't think they work well together. Any interest in trying that out? I also want to make a nice image gallery with Material-ui. ..Since you asked Brother ... lol thanks Bruno
I did not know about Framer Motion - it looks quite good =D
I used in the past gsap (greensock.com/gsap/)
Do you have any preference between the two? (if you have ever tried both) =)
@@BrunoAntunesPT I have not used GSAP, i have used React Spring and React Slick. I have been hearing about Framer Motion in the React community for about the last 6 months and it seems to be getting very popular so I started using it and i like it. I think all of these packages are very simple to use. I just want one tool that can handle all my animation needs and Framer seems to be a good candidate for that. I try to use mainstream technology as much as I can so when I join a new team my hope is everyone is somewhat familiar with the same tools, that's very hard but we have to try. Ramp up time ...
I think that's a really good approach =) If you use the most "commonly" used technologies the chances of landing in a team using those is quite high =D
This Material-UI Themes video is amazing Bruno. Thank you very much!
Thank you David 😍
Great class, great video, great teacher great mood. Thank you :D
Thank you very much 😍
Thank you. Clear and well prioritized content.
Thank you Edmund =D
@@BrunoAntunesPT I'm having trouble getting the overrides and props to take-effect. When I go to change the rules directly in the dev-console, the rules apply to:
```
@media (min-width:600px) {
.MuiContainer-root {
padding-left: 12px;
padding-right: 24px;
}
}
```
What is the approach with this extra context spec?
I don't know what you mean just by reading your comment...
Can you share a codesandbox with an example featuring the specific customization you want?
If you can please tell me what you want to achieve, I'll try to help =)
@@BrunoAntunesPT In a nutshell, I was wondering if my css specifications are being ignored because I need to specify a media context? I have some of the theme specs working, but not all of them. I'm troubleshooting accordingly. The MuiContainer seems a little tricky because it appears that it reads settings that depend the breakpoint...It would be great to learn more about how to use the dev-tools to work through how the final css rules are applied.
I'm not sure but I think I got your question 😃
The only two properties you should have to "override" using the media query are the padding-left and padding-right. In order to override those 2 properties you can do something like this:
```
import { createMuiTheme } from "@material-ui/core/styles";
// defaultTheme just to access the breakpoints
const defaultTheme = createMuiTheme();
// Create a theme instance.
export const theThemeYouWillUse = createMuiTheme({
overrides: {
MuiContainer: {
root: {
background: 'red', // this will work in all screen sizes
[defaultTheme.breakpoints.up("sm")]: {
paddingLeft: defaultTheme.spacing(3), // same as 24px (8*3)
paddingRight: "99px" // or use any value you want
}
}
}
});
```
You can also see that we are overriding the background colour without needing to use any media query because the component doesn't have any media query for the colour. Component source code: github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Container/Container.js
Let me know if this is what you were looking for 😃
Very informational and easy to understand. Thank you
I'm very happy you enjoyed it 🙂 thank you for your comment 😍
You nailed it ! Keep going, mate.
Thank you 🙂
Hi, Bruno! Another great video! I really enjoyed watching it. Thanks!
Thank you very much Nedim =)
Verrry helpful that you break down the fundamentals of where these generated class names come from, that was a head scratcher lol. Not sure if you've gone over it but I also get confused by the pseudo-classes like :hover and :disabled if you are open to tackling that. Thanks for making this video :)
i wish i could upvote this 100 times
❤️❤️❤️ Thank you very very much 😁
Hello Bruno, first of all, I'm really glad for catching one video of yours on my recommendations! I'd like to see a video explaining the $ruleName and pseudo-classes in Material-UI. I can achieve some examples, but sometimes I get lost on some stuff.
Keep going with the good work!!
Um abraço de Portugal !!
Grande Hélder, muito obrigado =D
Sempre bom ver Portugueses pelo canal, fico muito feliz mesmo. Que problemas tens tido com as pseudo-classes? =)
@@BrunoAntunesPT Obrigado pela resposta! Nos exemplos do Material-UI para substituir alguns estilos temos: '&$disabled' (sem espaço entre o & e o $) e às vezes existem exemplos onde há um espaço. Os exemplos normais de :hover e assim, são sempre colados ao &, e nisso nunca tenho problema. Mas por vezes não entendo alguns exemplos que eles têm. Quando queremos alterar a classe disable, no root, eles usam a pseudo-classe $disabled e depois no makeStyles criam uma classe disabled vazia, e na prop classes atribuem a classes.disabled a essa classe 'vazia'. É mesmo necessário efetuar isso? Eu normalmente crio uma classe com o makeStyles e passo através da prop className, é isto o mais recomendado? Ou convém usar mesmo a prop classes de cada componente e alterar os estilos desse componente por essas opções?
Espero ter-me feito entender xD mas continua com o bom conteúdo, porque Material-UI para React é mesmo lindo ahah
Por exemplo: material-ui.com/components/steppers/#customized-stepper
Nessa customização já tem: '& $line' com o espaço, e não entendo exatamente o porquê.
Abraço!
Sim eu acho que percebo a tua confusao - se eu responder a tudo menos a tua confusao por favor diz-me que eu irei reformular =)
Relativamente a primeira parte, ambas as maneiras que utilizas para fazer customizacao de componentes sao validas e ambas descritas aqui: material-ui.com/customization/components/
Relativamente ao espaco e nao espaco e' relativamente facil de explicar =D
Basicamente, se tiveres:
root: {
'&$bruno': { color: red; }
bruno: {}
}
O css gerado sera (esquecendo a parte random que eles geram):
.root.bruno {
color: red;
}
Por outro lado se fizeres:
root: {
'& $bruno': { color: red; } // repara no espaco entre & e $bruno
bruno: {}
}
O css gerado (mais uma vez sem contar com as classes random que eles geram):
.root .bruno { // repara no espaco entre & e $bruno
color: red;
}
No primeiro exemplo, queres um elemento com ambas as classes, por exemplo , e no segundo exemplo queres um elemento com a class "bruno" que tem um pai (pode ser avo, bisavo etc =D) com a classe "root", por exemplo
Relativamente ao porque de eles utilizarem os $, isso e' uma "heranca" deste plugin: material-ui.com/customization/components/
Espero que tenha respondido a tua pergunta, caso nao tenha respondido diz-me que pode acontecer eu ter percebido tudo mal =D
O meu segundo link esta' o mesmo que o primeiro link. Eu queria ter metido este: cssinjs.org/jss-plugin-nested/?v=v10.3.0
What a tuitorial! thank you!
Thank you Chris 😍
Hey Bruno, yes I am checking your videos but I will need quite some time to check them all!!! Great job and thanks again bro ;)
Thank you very much Anastasios 😀
If you want to see any new topic covered in a video let me know 😉😉
ffs finally someone with brain who actually explains how does this sht works below the surface... usually some 500k sub channels and React/UI "Wizards" just make 1h video and just copy pasting buttons and changing color="primary" ohhh look now u can make it color="secondary".... ohhh ok lets seee now we can add some text and make it look like h1... and finally copy paste whole navbar...
... Thank you mate...
Thank you very much 😀😀 I'm very happy I was able to help you understand this subject ❤️😃😃
Thanks, you help me a lot, congrats from Brazil!
Muito obrigado 😍
Excellent, just excellent. Thank you.
I'm happy you enjoyed it 😍 thank you 😊
wooooooooooooooooooooooooooooooooooooooooooooow
no words to describe how happy I am seeing this video
Thank you soooooo much
Thank you Khotam for watching the video 😀😀😀 I'm very happy you find it useful 😃😃😃
love this. please keep doing these types of videos in typescript. something that could be helpful is setting up basic express project with api in TS.
Thank you my friend 😀
At the moment I'm using nextjs for almost everything.
Being honest I can't think of any time I touched express for the last 2 or 3 months 😅
Hi Bruno! I was waiting a lot of time for your video ))
I know my friend and I'm really sorry for the lack of videos lately. Please accept my apologies 🙏🙏🙏
Hopefully things will get better here in London after the 4th of July ♥️♥️♥️
You are so talented and calm ,thank you 😂
Your video is interesting to watch and Learn, You explained in a very cheerful way, Thanks!
Thank you 😍😍😍
Great tutorial! Thanks man!
Thank you Aakash 😀😀
I learn a lot from this video. You just made MUI my best friend 😁.
Happy to hear that! =D
I like this video so much! Awesome Material UI theming explanation :)
Thank you 😊😊
Customizing Material UI has always been a nightmare to me ( especially the fucking text fields )
this video made things a lot more clear and taught me a lot of new things
so Thank you from the heart 🌹🌹🌹
Sooo good to hear that 😀
Thank you very much 😊
amazing video, very informative!! Thanks!! It would be nice to have one about customizing tables in MUI
Thank you for the suggestion, I may do one in the future 😊
You have an awesome personality and your teaching is very informative. Your video teaching would be better if you clearified how the customization settings corispond to the Material ui settings that are being changed so I can clearly imagine how it is working.
Thank you very much my friend 😀😀
Thank you also for the feedback on what to improve, it is very very welcome John 😍😍 can you give me an example of a setting that you would love to see better explained? 😀😀
just what I needed
Awesome 😎😎😎
Awesome Bruno, thanks 👍
Thank you 🙂
Tquu soo much brother.. Lots of support and love from india🇮🇳❤️❤️
Thank you very much my brother ❤️❤️ much love to India ❤️
apart from good explanation I want to say thanks for good mood and jokes it's really what I needed after hours of learning :)
Thank you very much Amadeus ❤️
I havn't watch such video ever tq and love from India
Thank you very much Ranjeet 😍😍 a lot of love to you my friend, all the people in India and all the people around our wonderful planet earth ❤️❤️
Nice vídeo!!
Vídeo theme suggestion: social medias login/authentication with own api middlewares too!
Muito obrigado Romulo =D
I've been playing quite a lot with Facebook and Google Auth lately for an app I'm doing.
I'm doing everything manually at the moment, probably soon I'll move my app to use passport =D
When I feel I have everything polished to show I'll publish a few videos about Auth providers like Google/Facebook/Microsoft etc =)
@@BrunoAntunesPT Nice! I'm kinda of trying to implement something similar, using passport.js too xD
That's awesome!!!
Honestly I'm really really close to move to passport, but for now I want to implement everything manually - this is a personal app I'm doing during the weekends, not for any client or company so I'm taking it as a learning experience even if it takes much much longer for me to complete it =D
If this was a production app most probably I would just throw passport into it and move on =D
@@BrunoAntunesPT Mine too! The problem is that I don't know how to do without passport, actually, idk even with passport yet xD
@@llSalazarll passport is pretty self-explinatory (at least I feel that way). On top of that, Google's OAuth API has some great charts to illustrate the entire process, that might help! But yeah hands down Social Login could be a great video Bruno!
I wish I saw this video sooner. Anyway, this video is very useful for me. Thank you so much for this video
Thank you for your lovely words 😍😍
That's really nice, man!! I Love all the valuable content that you make. Maybe u can talk about animations?
Oh Davi 😍😍 so good to read your comment, thank you very much 😃
I'm improving my animation skills at the moment - I have to assume I'm not good on it at this stage 😅😅😅
Awesome tutorial. Thank you!
Thank you my friend 😀😀
Thank you! Very good video 👌🏻
Than you very much 😀
Super helpful, thanks!
Thank you, I'm very glad to hear it! =D
Hey Bruno.
Material and Ant design seem to be the most popular ones.
I like react-sematic-ui the most for now.
Just found a few components there that the other ones don't have.
Just wanted to comment. Have a nice day
We have some amazing UI component libraries at the moment
Thanks a lot Bruno, you rock !
Thank you very much 😀😀😀
this helps a lot. thanks Bruno
Thank you Angelo 😊
Love your videos Bruno. Very well thought out and high quality like Egghead.io videos.
I'm speechless!!!! Thank you very very much Bernard
good work bruno...you earned a sub
Thank you Shawn 😀😀
thank you Bruno, such a great tutorial. keep up the hard work :D.
Thank you Mohamed! 😍
I love this in-depth explanation. Could you please make a tutorial on how to override these same styles using makeStlyes hook?
Thank you Felix =D
I don't have any specific video just explaining makeStyles, but during the car trading playlist I used it a handful of times =)
If you are interested, the playlist URL: ruclips.net/p/PLYSZyzpwBEWTt-0uuxAcSrJmMlnD9Yuz3
@@BrunoAntunesPT i haven't watched the whole playlist. I will take my time and watch it once I have finished learning Typescript
You can watch even without deep typescript knowledge 😊 but of course it would help if you know some typescript 😊
If you have any question(s) regarding typescript let me know 😊
Hello Bruno, I love this tutorial! Thanks! (Some ideas is to make a similar one for light and dark theme). Cheers from Costa Rica! Pura vida!
Thank you Kenneth 😊
I have something like that in the making 😁
Saludos a Costa Rica 😁
Amazing video 👍 thank you!
Thank you very much Paul 😀
@@BrunoAntunesPT do you know if it's possible to override styles that are set within media queries, I need to override muicontainer-fixed rules that have a max-width at each breakpoint.
As long as you can grab those styles on the developer tools like I showed in the video, you can override it 😊
@@BrunoAntunesPT yes you can 👍
Awesome 😍😍
Muito obrigado, ótimo vídeo.. parabéns... Thank you so much, great video.. congratulations.. I watch from Brazil
Muito obrigado 😍
Great video Bruno. Does it make sense to wrap MUI components like MuiButton which will have default props and styling set for an organization to be reused, but now it seems like theme can do those. Do you see any scenarios where wrapping MUI components is useful?
Just subscribed, you got many good points that I took a lot of time to understand, The props part I didn't even know...
I want to ask: How you manage multiple themes?
My company has a project that uses 3 colors as base, but when I change it to the black theme it turns to 2, I truly got lost in how to effectively apply these colors without changing all components individually.
Thank you very very much ❤️❤️
I'm actually planning a theme changer and dark theme video for next week.
Your use case seems quite interesting. Can you describe a bit more in detail your use case? I would love to present something that can be useful also for your use case 😉😉
thank you, saved me a lot of research!
I'm glad you found the video useful 😍😍 thank you
Question: Is it possible to add typography variants to the theme, like a body3, 4, 5 etc?
I never had that need/use case, so I never did any investigation on that...
That being said, I think probably you can't (I can be absolutely wrong here). My assumption was made just by looking into the typescript definition file (.d.ts):
```
export type Variant =
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'subtitle1'
| 'subtitle2'
| 'body1'
| 'body2'
| 'caption'
| 'button'
| 'overline';
```
If you are using typescript I'm tempted to say maybe not (from this 2 minutes investigation)....... but again I can be 150% wrong here and probably I am!!! =D
@@BrunoAntunesPT You actually CAN extend anything in Theme. material-ui.com/guides/typescript/#customization-of-theme
I for example created a hideOnPrint mixin, to easily hide elements when printing: codesandbox.io/s/eager-zhukovsky-je3bo
amazing video,thanks.
Glad you liked it! =)
thank you for great tutorial
Thank you Ramesh 😊
Found some gold
ohhh thank you Dennis 😍😍😍
thanks, learned a lot.
Glad to hear it! Thank you :)
good work
Thank you 😊😊
love this!
Love your profile name 😅😅 thank you mate, I'm happy you found the video helpful 🤩🤩
This is perfect! thank you so much! Could you do a video of how to customize a Select input from Material UI?
Thank you 😍😍
That's a great idea for a future video. Thank you 😀
Bruno Antunes thank you really! I’ve been asked to edit some input fields at work and most of them are from Material ui, your video really helped me a lot 💕
That's great to hear 😀😀
The idea behind the select component is the same we did for the input fields.
We use the browser to check the classes that are being applied and override them, like we did for the input field 😊
Thank you so much for this.
Thank you Glenn 😃
Hello Bruno, Thanks for your helpful videos! i have one problem can you help to me ? How to get equal width of TextFields and Select (FormControl) fields in Material Ui? Thanks before!!
Thank you my friend 😀
They both have a property if I'm not mistaken called fullWidth 🙂
With that property they will grow to the size of their containers 😀 then with the grid component, you can make the container any size you want 🙂
Amazing video. I'm using also theme for MUI, but I'm very confused about the difference between eg MuiButton & MuiButtonBase. This not clear at all in the doc. Any clue?
Thank you my friend 😀
Around 18:40 I show how you can use the browser developer tools to check the class to override. That method works for every component you want to override 😊
Let me know if after using that method it helped you 😊
@@BrunoAntunesPT I got it for sure. My question is more an "architectural" one. "MuiXXXBase" classes seem more focued on basic events with a very minimalistic styling whereas the "MuiXXX" classes have more embedded default styling. MuiXXXBase component are probably more useful when using another styling library (such as styled-components). But this is an assumption
Well... as always.... it depends what you want to do :)
For example, the MuiButtonBase class is also used for checkboxes... so if you override it like:
const theme = createMuiTheme({
overrides: {
MuiButtonBase: {
root: {
border: "5px solid yellow"
}
}
},
});
You now have all buttons doing what you probably want. Sadly, checkboxes now have a round border of 5px and yellow. If that's what you want, that's good news... but sadly I don't think that's what you wanted... 😊
As I said in the beginning of this comment, it really depends on what you want to do, sometimes it may be useful to override props of the Base components... 😊
For example, if you want to disable all ripple effects in your application then you may want to do this:
const theme = createMuiTheme({
props: {
MuiButtonBase: {
disableRipple: true
},
},
});
You are awesome bother
Thank you 😍😍 You are awesome Ashish 😍😍
These is an awesome tutorial, real key informations for production. keep up the hard work. i just have one question pls. the design you on the mui elements will be applied to all the material ui elements but what if my app has two or more types of buttons and i would like to create multiple variants for the same btton (one with color blue and the other with color black) how could i procede i this situation? thank you in advance
Thank you very much 😊
In your case I would use the different button variants that already exist in material, primary, secondary, default, etc 😊
Here you have an example, when you change the primary and secondary colours your buttons colours will update with them 😊 material-ui.com/customization/palette/
@@BrunoAntunesPT i made some research and found out that in material ui version 5 they will be prividing a way to create new custom variants of MUI components but it's a beta so i avoid using it for the moment. Actually the best solution i found for this issue is to create a file containing a makestyle function in which i create my own css. What i ended up doing is setting the commun style between all my buttons in the app, then i create other classes each one containing specific css values of each of my button then when calling the mui bottons i just concat the root with one of the other classes with clsx. And i could maybe use this files in other projects. Of course i'm using the theme too. And that's it. I'm actually not sure if this solution is good but i found it to be convenient for the moment. I really would like to have your oppinion on this and thx again bruno 😁😁
Nice.
Please make new series on blog with nextjs and seo its most awaited and i request before.
Please it is best series on youtube
Thank you Muhammed =D
I will try to find some SEO expert to work with me on that one. I don't want to share information that can potentially be wrong.
SEO is a really really complex subject - it's one of the subjects I'm not good enough and my knowledge has a lot of gaps that I need to improve =D
have a look at this ... I had this in my bookmarks for later use : dev.to/jfelx/how-to-make-a-static-blog-with-next-js-2bd6
SEO included
Just use this tutorial and so Bruno isnt overloaded with request^^
@@BrunoAntunesPT oh then please make about blog or anything series like car traders.
And thanks for making video and i don't want to force anyone i like your video then i requesting and giving hint only
@@MedyGames thanks for sharing i will read that
I really love all the video ideas you give me, please please pleasee keep posting suggestions ❤️😍
Thanks Medy for the blog post, really really nice 😀😀