How To Customize MudBlazor Styles (And Fix CSS Isolation Problems)

Подписаться 4,9 тыс.

Просмотров 14 тыс.

50% 1

Today we go over on how to customize Mudblazor styles. Specifically when it comes to customizing your application and making it look good and professional MudBlazor is a fine choice. However a problem presents itself when you are dealing with CSS and more specifically CSS Isolation. Today we go over how to customize mudblazor component styles and deal with issues along the way.
Join The JustBlazorProgramming Discord For A Limited Time: / discord
00:00 Intro
00:40 MudBlazor Quick Glance
01:58 Showing API of Mudblazor Components
02:20 Style Parameter
02:49 CSS Isolation Problems Are Nothing New
03:28 Project Start
06:28 Changing Theme to Dark
09:00 Changing MudButton Style
11:42 CSS Isolation And Problems
13:00 keyword ::deep
13:51 CSS isolation fails
15:00 How to Fix CSS Isolation Problem (Somewhat)
15:40 Changing _Layout
16:30 Adding New CSS Style Sheet
18:30 Need To Wrap Components In HTML Elements
19:56 Testing the Global Css Stylesheet
20:30 No Good fix from me for the global stylesheet
21:00 Testing Without Css Stylesheet
22:00 Testing a normal html element
24:00 A bootstrap-like component
26:00 using !important if things dont work
28:20 Mudblazor Resources
28:35 Bonus Question From A Subscriber (ButtonFab to the Bottom)
30:37 Brief Review

Наука

Опубликовано:

31 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 36

@YuzzyBee 2 года назад

Seriously bro? You delete my post just because I suggest you Ctrl C/Ctrl V or Ctrl D? 😅 I like your channel and your different tips in videos but sometimes you can receive tips from your community too I think.. It's not a bad thing 😉 Good luck anyway!

@justblazorprogramming 2 года назад

Delete your comment? I didnt do that. I dont bother deleting comments unless i believe youre a robot or a troll or violating TOS. If you want, repost what you said.

@justblazorprogramming 2 года назад

Also i do have a discord where I do take feedback from as well. I believe I have tried to make myself open to constructive criticism, but I dont know why your original comment was deleted as you said.

@chezchezchezchez 2 года назад

@@justblazorprogramming hilarious!

@timv9595 Год назад

Thank you for the video, easy to follow and well explained ! This saved me hours on my project

@nothingisreal6345 Год назад

Thanks a lot for the video! Was struggling with this for 5 minutes. Thank God you solved that issue already. It is a pity that, no matter what you use, with CSS: always painful 🙂

@majormartintibor 2 года назад

Very useful video, thank you!

@justblazorprogramming 2 года назад

Glad you enjoyed it!

@iancarr3923 2 года назад

A great help to me as I was struggling with this issue. However, difficult presentation to follow at times.

@justblazorprogramming Год назад

Glad you liked it. Part of the reason it feels like it cause i did it after discovering the problems cause i had an idea for a different mudblazor video, but then the css isolation problems showed up and i thought this would be a better alternative. Thanks for the compliment, i hope you keep enjoying the content

@UltraPayrollMaster Год назад

Thanx for posting the workaround. I could not have figured it out myself. I hate that the "issues" and "discussions" sections of the MudBlazor GitHub project page were not able to help me at all.

@abdulahmed7636 Год назад

Kudos bro. You fixed my problem.

@ricardodelgadolc7429 Год назад

Thank You !!! very much!

@ruslan_yefimov 6 месяцев назад

Thanks! I've struggled with how Blazor's css isolation works with MudBlazor, but everything is quite easy apparently

@liquidcode1704 Год назад

My big gripe with mudblazor is with the mudtab and mudtabpanel, if you use a badge, then the overflow can end up hidden. They should make it a built in option to not allow badges to overflow/be hidden

@franciscofernandezcasas7924 11 месяцев назад

Do you know why Mudblazor TextField looks a little blurry in maui blazor app in android emulator?

@TheHombresinombre Год назад

Man, you just saved my ass. I was struggling for some hours how could I override the MudBlazor CSS for a MudNavLink in a Drawer. It works wonders!

@justblazorprogramming Год назад

Im happy it helped. This video wouldnt exist if i didnt try to make another video altogether and found these problems and had to at least find a solution cause i do like MudBlazor

@ayyWIlliamz Год назад

Appreciate this vid but can you do one that targets mudblazor elements that arent accessible within the code editor? I'm creating a dialog but having a hard time targeting things like 'dialog-content' 'dialog-title' .. seems like ::deep is picky on what to target with these

@chrisbaker5284 10 месяцев назад

I found that when using the global css file that you don't need ::deep nor do the buttons need to be wrapped in html. Great stuff on the css isolation though, that's been an ongoing battle which you have solved, cheers.

@kirillbukshuk7590 8 месяцев назад

Thank you, very much! It is still relevant and help me a lot. Wrapping with works. But, issue with the global css is also fixed by removing ::deep. Really, in global css you do not need them and it works. Probably, new version 😀

@vinnbrock Год назад

Great video, quick question though. For the code behind with CSS, does Mudblazor support SCSS? I'm guessing not, but I have to ask. Also when you need to move a line of code above or below another, you can put your cursor on the line of code, then hold alt and arrow up or down. Don't even have to cut/paste. If you need to move a block of code, just select the entire block, then hold alt and arrow up or down.

@justblazorprogramming Год назад

The library uses some scss for some components, but idk if you can use your own custom made stuff and have that be compatible. You should try though i dont see a reason why not but you might run into the same problems just writing normal css has with it. Also ya im very sloppy when im writing quickly, i only format stuff at the end so its not indicative on how i code for production level stuff.

@vinnbrock Год назад

@@justblazorprogramming yeah I just wasn't sure if it could complile the SCSS. I could always set up a gulp task, but that's so 2015. LOL. Yeah, I wasn't being critical of your VS skills. Was just sharing a tip with you, or anyone else who was unaware of the shortcut. Please keep up the great videos. I think I'm going to be using Blazor for my project.

@kakdiyaamit6625 2 года назад

can u create project tutorial in mudblazor? Very useful video, thank you!

@justblazorprogramming 2 года назад

Ya you just need to download the package

@kakdiyaamit6625 2 года назад

Where is package? Can u provided link

@justblazorprogramming 2 года назад

If you go to the mudblazor website they have installation instructions.

@user-eu2xd7jr5l 4 месяца назад

::deep is deprecated in CSS

@diligencehumility6971 Год назад

I think the easiest and best way to customize MudBlazor is to create a class that inherits from 'MudTheme'. From there you can override colors, fonts, shadows, etc. Then you apply the theme ''

@diligencehumility6971 Год назад

If you are using the 'Style=' property in your html/razor page, you are doing it wrong. If there is styling you cannot do by overriding the default theme, then either override MudBlazor's CSS or make your own component to encapsulate your specific styling. Don't have CSS floating around in your html files, re-use it.

@justblazorprogramming Год назад

@@diligencehumility6971 I actually agree with this, its a practice i dont do when manipulating CSS components however it is an option in case you have to get something done and you dont have all day to figure out how to do it correctly. Its a matter of practicality sometimes.

@marcusreynolds226 Год назад

𝐩𝓻Ỗ𝓂Ø𝓈Ｍ 👇

@BrentRicks Год назад

This works great except, for example, if I want to change the MudDrawer (::deep .mud-drawer) background. Any ideas?

@justblazorprogramming Год назад

Im sure there is a better solution, but try to do that inline. I believe the component will act as you want it to but thats only off the top of my head. Id start there.