Skip to content

SeppPenner/BlazorStyled

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

74 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

@functions {
    private string hover;
    private string color = "white";

    protected override async Task OnInitAsync()
    {
        hover = await Styled.Css($@"
            padding: 32px;
            background-color: hotpink;
            font-size: 24px;
            border-radius: 4px;
            &:hover {{
                color: {color};
            }}
        ");
    }
}

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

Packages

No packages published

Languages

  • C# 56.7%
  • HTML 43.3%