You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A library to allow adding CSS locally inside .razor components without duplication.
Why?
While using <style> ... </style> within Blazor components works fine, each instance of the component creates a new
style tag.
This results in unnecessary junk in the DOM as well as potential styling conflicts.
Using CSS isolation (.razor.css) fixes these issues, but having styles in a separate file sucks.
Usage
Add @using RazorStyle to your _Imports.cs. (This is necessary for IDE support)
Add the StyleRoot component to any singleton component, for example App.razor. The root component creates a
single <style> tag to be
shared between all instances of <RazorStyle.Style>.
// App.razor// ...<StyleRoot/><Router AppAssembly="@typeof(App).Assembly">// ...</Router>@code{protectedoverridevoidOnInitialized(){base.OnInitialized();
#if DEBUG// Enable hot reload for debugging only (performance impact)StyleRoot.EnableHotReload=true;
#endif
}}// ...
Use <Style> instead of <style> in your components.
BEWARE: This library does not handle CSS isolation! Make sure to use
unique class names / selectors to avoid conflicts between components.
Triggered animations
Adding a _triggered_ prefix to @keyframes blocks will duplicate it with a different name.
This can be used in combination with AnimationTrigger to replay an animation programatically without relying on JS.
// SomeAnimatedComponent.razor@code{readonlyAnimationTrigger_titleAnimation=new("fly-in");voidTrigger(){_titleAnimation.Trigger();StateHasChanged();}}<button@onclick="Trigger">Trigger</button><h1 class="title" style="@_titleAnimation">Home</h1><Style>.title{// ! do NOT include the animation name ! animation:1s linear;// ...}
@@keyframes_triggered_fly-in{// ...}</Style>
About
A library to allow CSS inside .razor components without duplication