custom css not working

Hello,

It seems that custom css in the nodetemplate is not being applied.

Minimal example:

FunctionNodeWidget.razor

<div class="default-node functionnode @(Node.Group != null ? "grouped" : "") @(Node.Selected ? "selected" : "")" style="width: 250px; background-color: @Node.Function.Color">
    @Node.Function.Name
    @foreach (var port in Node.Ports.Cast<FunctionPortModel>())
    {
        <PortRenderer Port="port" Class="functionport">@port.Connector.Name</PortRenderer>
    }
</div>

@code {
    [Parameter]
    public FunctionNode Node { get; set; }
}

As you can see I’m adding class functionport on the PortRenderer. It is defined in the component’s stylesheet:

FunctionNodeWidget.razor.css

.functionport {
    padding: 5px;
    margin: -18px;
    border-radius: 50%;
    background-color: #f5f5f5;
    border: 1px solid #d4d4d4;
    cursor: pointer;
    position: absolute;
}

It does not get applied at runtime. Moving the class to app.css doesn’t work either. Am I doing something wrong?

Thank you

[BjornEngelen]

After some fumbling around it seems !important is doing the trick. I guess I’m just having some sort of precedence-issue, and there is no issue with your library. I think we can close.

Thanks for your work and this utility

[zHaytam]

So technically, the CSS is working. If you inspect your node’s ports, they aren’t styled at all? Maybe it’s just not visible (since it’s only 5px padding)? What if you put your css (without the deep thing) on a global css file (no CSS isolation) and see if that works?