CSS in Blazor Components
View the detailed docs at https://chanan.github.io/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
<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/.