Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 

BlazorStyled

CSS in Blazor Components

Docs

View the detailed docs at https://blazorstyled.io.

Install

NuGet Pre Release

Why BlazorStyled?

  • Maintain your css inside your component instead of a seperate file
  • Eliminate all collisions - no need to use !important
  • No need to worry about depoying css files - great for libraries
  • css are C# strings - use variables instead of solutions like sass

Insperation

Short Example

<Styled @bind-Classname="@hover">
    label: hover-example;
    padding: 32px;
    background-color: hotpink;
    font-size: 24px;
    border-radius: 4px;
</Styled>

<Styled Classname="@hover" PseudoClass="PseudoClasses.Hover">
    color: @color;
</Styled>

<div class="@hover">
    Hover to change color.
</div>

@code {
    private string hover;
    private string color = "white";
}

See more in the docs at https://chanan.github.io/BlazorStyled/.