Material UI Tutorial #17 - Avatars

[@billthomas2154]

I'm using the new MUI 5, it took me awhile to get the avatar colors using sx instead of makeStyles. I included this in the html: sx={{backgroundColor: note.category == "work" ? ylow : note.category == "money" ? grn : note.category == "todos" ? pnk : bl}} then this above the return statement: const ylow = yellow[700]; const grn = green[500]; const bl = blue[500]; const pnk = pink[500];

[@barryallen45586]

Thanks a lot. I couldn't figure it out how to do it.

[@mrgrossartig]

Did you do the whole course with MUI 5? I also wanted to start with the current version but stopped when I spend a day figuring out how to do all that stuff. If yes, would you might share your link to the repo? Thanks

[@minsookim1571]

could also do sx={{backgroundColor: avatarColor[note.category] || blue[500]}} where const avatarColor = {
work: yellow[700],
money: green[500],
todos: pink[500],
};

[@abdullahalsiam105]

@@mrgrossartig i have done it. if you need code let me know

[@Lvl9chao]

Very helpful tutorial series. Looking forward to part#18!

[@sonnix31]

You are one of the best teachers out there. Thank you sir!

[@DennisHorn1981]

00:01:45 Finally! Mario and B(r)owser in peacful coexistence... ♥ 😅
Apart from that: Your tuts are awesome, perfectly structured, paced and understandable! Thank you so much for you efforts, I highly appreciate it! 👍

[@all12jus]

You should learn about switch statements for how you handled the color for the avatar.

[@e.castro.5537]

Amazing ❤️👏🏼👏🏼👏🏼

[@sumukhakb2701]

Please make Advanced Nextjs and typescript series

[@parvati27]

Thank you shaun :)

[@trandinhthang5778]

I want write className="box active" (.class.class) in material, how should i write?

[@Frostfyre1229]

How would i accomplish the styling dependent upon the note prop passed if Im using v5 with the sx property? Thank you!

[@CynthiaSotoCaballerolYEAHl]

sx={{
backgroundColor: () => {
if (note.category === "work") return yellow[700];
if (note.category === "money") return green[500];
if (note.category === "todos") return pink[500];
return blue[500];
}
}}
sx prop on Avatar component

[@葉少芃]

@@CynthiaSotoCaballerolYEAHl Thanks for your superior answer.

[@dhrunit1018]

Thank you for this ❤️

[@dannyman2200]

By any chance does anyone know why I'm not getting the emmet suggestions for auto imports such as the Avatar component, I've got ES7 extension, anyone got a clue as to what I'm missing? thanks in advance if you do 👍

[@neymarjr-sc3oi]

simple react snippets extension

[@amrutkhot992]

You are My favourite.! Just one Request .. Please make a series again on React-redux... Using redux hooks.. Hope you will work on it.. Much much Respect..!

[@vuongqtvn]

best channel

[@jumbo999614]

I put image in /src/images/...jpg. I use .
It doesn't render the image.

[@xq_nemesis]

I believe you have to import it at the top like
import MarioImage from ‘../src/images/mario.jpg’ and then use it like that

[@pkdclt]

Thank you so much!

[@NetNinja]

You're welcome!

[@kelsey_roy]

4:28 nitpick. Prefer `===` equal equal equal.

[@PB72UK]

Not really needed here to be honest, since the note category will always be a string

[@arikedada]

lovely videos, the avatar isn't rendering on my page

[@prafulrane3591]

Need a roadmap video to follow your channel content!!!

[@raptorinc8331]

Thank you.

[@ridl27]

ty

[@aidin3186]

❤‍🔥❤‍🔥❤‍🔥❤‍🔥

[@kovendanragupathi7632]

Can you please confirm how many videos remaining to complete the series

[@NetNinja]

Only 1 more :)

[@ridl27]

pro tip: check the git :)

[@mgr1282]

Go Fiber, plz