https://github.com/chanan/blazorstyled

CSS in Blazor Components
https://github.com/chanan/blazorstyled

blazor css styled-components

Last synced: 18 days ago
JSON representation

CSS in Blazor Components

• Host: GitHub
• URL: https://github.com/chanan/blazorstyled
• Owner: chanan
• License: unlicense
• Created: 2019-05-22T16:43:27.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-07-09T21:22:47.000Z (10 months ago)
• Last Synced: 2025-03-28T13:09:37.037Z (25 days ago)
• Topics: blazor, css, styled-components
• Language: C#
• Homepage: https://blazorstyled.io
• Size: 65.8 MB
• Stars: 192
• Watchers: 19
• Forks: 19
• Open Issues: 27
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# BlazorStyled

_CSS in Blazor Components_

## Docs

View the detailed [docs](https://blazorstyled.io) at https://blazorstyled.io.

## Install

[![NuGet Pre Release](https://img.shields.io/nuget/vpre/BlazorStyled.svg)](https://www.nuget.org/packages/BlazorStyled/)

## 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

* [Emotion](https://emotion.sh/docs/introduction)

* [Glamorous](https://glamorous.rocks/)

* [Glamor](https://github.com/threepointone/glamor)

## Short Example

```

    label: hover-example;

    padding: 32px;

    background-color: hotpink;

    font-size: 24px;

    border-radius: 4px;

    color: @color;



    Hover to change color.



@code {

    private string hover;

    private string color = "white";

}

```

See more in the [docs](https://chanan.github.io/BlazorStyled/) at https://chanan.github.io/BlazorStyled/.