wihrl.RazorStyle 2.1.2

.NET 6.0 This package targets .NET 6.0. The package is compatible with this framework or higher. 
dotnet add package wihrl.RazorStyle --version 2.1.2
                    


                    

                
NuGet\Install-Package wihrl.RazorStyle -Version 2.1.2
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="wihrl.RazorStyle" Version="2.1.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="wihrl.RazorStyle" Version="2.1.2" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="wihrl.RazorStyle" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add wihrl.RazorStyle --version 2.1.2
                    


                    

                
#r "nuget: wihrl.RazorStyle, 2.1.2"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package wihrl.RazorStyle@2.1.2
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=wihrl.RazorStyle&version=2.1.2
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=wihrl.RazorStyle&version=2.1.2
                    


                            Install as a Cake Tool

RazorStyle

A library to allow adding CSS locally inside .razor components without duplication.

Nuget Nuget

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

  1. Add @using RazorStyle to your _Imports.cs. (This is necessary for IDE support)

  2. 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 {
protected override void OnInitialized()
    {
        base.OnInitialized();

#if DEBUG
        // Enable hot reload for debugging only (performance impact)
        StyleRoot.EnableHotReload = true;
#endif
    }
}

// ...
  1. Use <Style> instead of <style> in your components.
// SomeComponent.razor

<h1 class="title">Foo</h1>

<Style>
.title {
    // ...
}
</Style>

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 {

    readonly AnimationTrigger _titleAnimation = new("fly-in");

    void Trigger()
    {
        _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>
Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
2.1.2 237 9/27/2025
2.1.1 308 3/4/2024
2.1.0 223 3/4/2024
2.0.0 242 11/11/2023
1.0.1 211 10/17/2023