Blazor - Dodawanie Styli CSS

W poprzednim artykule pokazałem Ci jak rozdzielić kod widoku od kodu C#. W tej lekcji będziemy pracować na tym samym projekcie (domyślny szablon Blazor Web App) i pokaże Ci, jak stylować, jak dodawać pliki CSS w aplikacji Blazor.

Bootstrap

<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

Wspólne style

Jeżeli masz jakieś wspólne style CSS, to możesz je umieścić w folderze wwwroot. Tutaj też jest już plik app.css, który również zawiera już sporo domyślnych styli.

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {

    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

I jeżeli masz wspólne style dla wszystkich komponentów, dla całej aplikacji, to najprościej umieścić je w tym pliki i tak jak wspomniałem zostaną one zastosowane dla całej Twojej aplikacji.

Jeżeli dodasz dobie tutaj jakies stylowanie np. dla przycisku:

.btn-primary {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

To zostanie to zastosowane we wszystkich miejscach, dla wszystkich elementów z klasą btn-primary. W tym momencie ustawiamy dla wszystkich przycisków kolor tła na czarny, a kolor czcionki na biały.

Tutaj na razie nie ma nic nowego.

Stylowanie komponentów

Natomiast Blazor oprócz wprowadzania takich nazwijmy to wspólnych styli umożliwia nam wprowadzanie styli tylko dla danej strony, czy jednego konkretnego komponentu.

I to jest super.

Mamy wtedy dedykowane style tylko dla konkretnego komponentu w oddzielnym pliku. Dzięki temu plik aż tak bardzo nie puchnie i jest to bardzo czytelne. Jeżeli coś będziemy chcieli zmienić w naszym komponencie, to nie musimy szukać styli w wspólnym pliku tylko w tym dedykowanym.

Jeżeli chcesz dodać style dedykowane dla jakiejś podstrony, jakiegoś komponentu, to wystarczy podobnie jak to pokazywałem już w poprzednim artykule - dodać nowy plik obok widoku, tym razem z nazwą widoku i rozszerzeniem razor.css.

W naszym przypadku będzie to Counter.razor.css

.btn-primary {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

Dodałem tutaj od razu kod CSS, gdzie zmieniam dla elementów z klasą btn-primary kolor tła na biały, a kolor czcionki na czarny.

I jeżeli teraz dodasz sobie np. w Home.razor nowy przycisk:

<button class="btn btn-primary">Click me</button>

To po uruchomieniu aplikacji możesz zauważyć, że:

• Na widoku Home.razor mamy przycisk biały z czarną czcionką.
• Na widoku Counter.razor mamy przycisk czarny z białą czcionką.

Czyli w łatwy sposób udało nam się dodać dedykowane style tylko dla naszego komponentu Counter.
Z kolei strona Home.razor korzysta z styli wspólnych.

Jak to działa?

Jeżeli sobie uruchomisz aplikację. Przejdziesz na stronę Counter, następnie do źródła strony, to możesz zauważyć, że na każdym elemencie został dodany atrybut, w tym przypadku: b-mgw85zt6f4 i jest to taki identyfikator dla tego komponentu. Dzięki temu można w ten sposób dodać unikalne style tylko dla 1 konkretnego komponentu. Oczywiście jeżeli stworzyłbyś kolejny komponent z dedykowanymi stylami CSS, to tam byłby wtedy inny identyfikator.

Tak to wygląda w DOM:

<button class="btn btn-primary" b-mgw85zt6f4="">Click me</button>

.btn-primary[b-mgw85zt6f4] {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

Także takie stylowanie, to kolejny plus dla Blazor'a.

Szkoła Blazora

Przy okazji, jeżeli chciałbyś poznać Blazor'a od podszewki, to rozważ dołączenie do mojego szkolenia online - Szkoła Blazora (tutaj więcej informacji - https://szkolablazora.pl).