Скачать или смотреть How to Pass CSS Classes in Isolated Mode in Blazor Components

Learn how to effectively use CSS class definitions in Blazor components while keeping them isolated, enabling better styling for child components.
---
This video is based on the question https://stackoverflow.com/q/76756458/ asked by the user 'greenoldman' ( https://stackoverflow.com/u/210342/ ) and on the answer https://stackoverflow.com/a/76757721/ provided by the user 'Henk Holterman' ( https://stackoverflow.com/u/60761/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Is there a way to pass CSS class in isolated mode?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Pass CSS Classes in Isolated Mode in Blazor Components

When building composite components in Blazor, you might encounter challenges with CSS classes, especially when dealing with isolation. This can often leave developers puzzled on how to implement styling in child components. In this post, we’ll address a common problem developers face associated with passing CSS classes in isolated mode, along with a straightforward solution.

The Problem: CSS Class Isolation

In Blazor, when you define CSS styles in a component's specific file (e.g., MyComponent.razor.css), those styles are scoped or isolated to that component only. This is beneficial as it avoids global styles interfering with each other but can cause problems when you want a CSS class defined in your component to be available in its child components.

For instance, you might be trying to apply a CSS class like testing to an <InputNumber> component as shown below:

[[See Video to Reveal this Text or Code Snippet]]

While this works fine for global CSS classes, your isolated styling from MyComponent.razor.css won’t apply to the child element. Hence, it’s essential to find a way to share these styles effectively.

The Solution: Using ::deep Selector

The good news is there is a simple solution to ensure your CSS class definitions remain local but still affect child components. Here’s how you can implement it:

Step 1: Wrap Your Component in a <div>

First, wrap your child component in a <div>. This can help manage the scope of your styles properly:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Apply the ::deep Selector in Your CSS

Next, in your MyComponent.razor.css file, you’ll need to use the ::deep selector. This selector ensures that the styles are applied deep within the DOM hierarchy, thus allowing the child component to inherit these styles:

[[See Video to Reveal this Text or Code Snippet]]

Example Structure

Putting it all together, it would look something like this:

MyComponent.razor

[[See Video to Reveal this Text or Code Snippet]]

MyComponent.razor.css

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By properly utilizing a <div> around your components and integrating the ::deep selector into your CSS, you can efficiently pass CSS classes while keeping your styling isolated in Blazor. While it may seem somewhat unusual to need a <div> for this purpose, it fits within the specific design of Blazor and how it handles CSS.

With these insights, you should now be equipped to style your Blazor components effectively without losing the benefits of CSS isolation.