Name		Name	Last commit message	Last commit date
.vscode		.vscode
docs		docs
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
BlazorStyled.sln		BlazorStyled.sln
LICENSE		LICENSE
readme.md		readme.md

Repository files navigation

BlazorStyled

CSS in Blazor Components

Docs

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

Install

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/.