Overriding default CSS - Githubissues

Hello, i'm trying to test your library to get a feel for it and hopefully use it in an upcoming project. However i seem to be unable to override the default node style.

I'm using v2.1.6 on a Blazor WASM project.

I made a custom node component to render: InfoNodeComponent.razor

@using Blazor.Diagrams.Components.Renderers;
@using Blazor.Diagrams.Test.Nodes
@using System.Diagnostics
@using Blazor.Diagrams.Test.Diagrams.Ports

<div class="default-node @(Node.Selected ? " selected" : "")">
    <div class="node">
        <div class="default-node background-orange">
            <div class="p-3">
                <p>@Node.DisplayName</p>
            </div>
            @foreach (var port in Node.Ports.Cast<CustomPort>())
            {
                <PortRenderer Port="port">
                </PortRenderer>
            }
        </div>
    </div>
</div>

@code {

    [Parameter]
    public InfoNode Node { get; set; }

}

And the css: InfoNodeComponent.razor.css

.default-node .port {
    width: 10px !important;
    height: 10px !important;
    margin: -5px !important;
}
.background-orange{
    background-color: orange;
}

Which results in

The background gets applied just fine so i know the css file is being loaded however the node style is not overridable.

So I checked the index.html in wwwroot

Which looks like:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>Blazor.Diagrams.Test</title>
        <base href="/"/>
        <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
        <!-- in the head element -->
        <link href="_content/Z.Blazor.Diagrams/style.min.css" rel="stylesheet"/>
        <!-- if you want the default styling -->
        <link href="_content/Z.Blazor.Diagrams/default.styles.min.css" rel="stylesheet"/>
        <link href="css/app.css" rel="stylesheet"/>
        <link href="Blazor.Diagrams.Test.styles.css" rel="stylesheet"/>
    </head>

    <body>
        <div id="app">Loading...</div>

        <div id="blazor-error-ui">
            An unhandled error has occurred.
            <a href="" class="reload">Reload</a>
            <a class="dismiss">🗙</a>
        </div>
        <script src="_framework/blazor.webassembly.js"></script>
        <script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
    </body>
</html>

Order seems fine here though. Any insight in this would be appreciated.

Blazor-Diagrams / Blazor.Diagrams

Overriding default CSS #185