0

I have two front ends both Blazor.

  • MyProject.Web //Blazor server
  • MyProject.ChromeExtension //Blazor WASM

To make things less verbose I would like to package my UI in another Project which then is used by both of the Frontends.

  • MyProject.SharedUI

I want to use AntDesign Blazor, since my UI skills are limited. Adding the library to either Project is trivial. The problem I have is when I trying to import AntDesign Components in my SharedUI Project.

Here is an example:

MyProject.SharedUI - SubCounter.razor

@using AntDesign
<Button Type="@ButtonType.Primary" @onclick="ButtonClicked">SharedUI Counter @_currentCount</Button>
@code {
    int _currentCount = 0;
    private void ButtonClicked() => _currentCount++;
}

MyProject.Web - Counter.razor

@page "/counter"
@using AntDesign
<SubCounter/>
<Button Type="@ButtonType.Primary" @onclick="ButtonClicked">Primary @_currentCount</Button>
@code {
    int _currentCount = 0;
    private void ButtonClicked() => _currentCount++;
}

This will result in the SubCounter to not be stylised: On the left an image of the SubCounter without style, on the right the correct Counter button.

I have both the JS and the CSS included in my _Host.cshtml as described here. I wouldn't know where to put the JS or CSS in my SharedUI Library.

I have already tried to add the CSS in my SubCounter component, but this makes certainly no sense and doesn't work. Adding the JS in my SharedUI Library, also makes no sense since script tags should not be placed inside components, because they cannot be updated dynamically.

Any help is appreciated, thanks in advance.

Eik
  • 1

0 Answers0