Gray Wolf Corporation

MudBlazor and css isolation

Every library has its quirks and MudBlazor is no different. CSS isolation takes a couple tweaks, but seems to work fine after implemented.

Detailed discussion on GtHub

I have a Blazor component to render content created at Contentful which can include markdown.

For some reason, the "P" tag was not adding any spacing between tags. Maybe css conflict? I decided the quickest fix was to add padding-bottom: 20px to the "P" tag within the component, but nothing happened.

css-iso-1

I found the above mentioned github thread, made the fixes and it seems to work.

First, need to add the ::deep prefix to the component css:

css-iso-2

Next, you need to wrap the component or html in a "DIV" tag:

css-iso-3

That should do it. I needed to do a hard refresh on the Azure site, but locally testing worked right away.

css-iso-4

An unhandled error has occurred. Reload 🗙