https://github.com/chanan/BlazorStyled

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

blazor css styled-components

Last synced: 2 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 (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-17T21:48:15.000Z (over 3 years ago)
• Last Synced: 2024-06-21T18:09:03.644Z (8 days ago)
• Topics: blazor, css, styled-components
• Language: C#
• Homepage: https://blazorstyled.io
• Size: 65.1 MB
• Stars: 190
• Watchers: 19
• Forks: 20
• Open Issues: 26
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Lists

• AdrienTorris_awesome-blazor - BlazorStyled -   CSS in Blazor Components ([Demo](https://chanan.github.io/BlazorStyled)). (Libraries & Extensions / Components)
• blazor-awesome - BlazorStyled -   CSS in Blazor Components ([Demo](https://chanan.github.io/BlazorStyled)). (Libraries & Extensions / Components)

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