Colour of RadzenLink isn't working

Radzen.Blazor Components
1

The RadzenLink has the correct colour of Pink when hovered, however it is White rather than Deep Pink when not interacted with.

.razor

<p><RadzenLink Style="add-content" Path="add-content" Text="here." Target="_blank" /></p>

.css

p a.add-content, p a:active.add-content, p a:visited.add-content {
    color: deeppink;
    text-decoration-line: none;
}

p a:hover.add-content {
    cursor: pointer;
    color: pink;
}
2

If you want to set the CSS class of RadzenLink (or any other Radzen Blazor component) you must use the class attribute instead of Style.

<RadzenLink class="add-content" ... />
3

I changed Style to class and I still don't get a Deep Pink link. Its White and when hovered it changes to Pink.

4

Seems to work just fine in our online demo. Here is what I tested with:

<style>
p a.add-content, p a:active.add-content, p a:visited.add-content {
    color: deeppink;
    text-decoration-line: none;
}

p a:hover.add-content {
    cursor: pointer;
    color: pink;
}
</style>
<p>
    <RadzenLink Path="buttons" Text="Go to Buttons page" class="add-content" />
</p>

image
image1946×742 39.9 KB

You can use your browser's developer tools to inspect what CSS rules apply to that link. I suspect there is other CSS that is interfering because it has higher precedence.

5

Thanks for your help. I found out what the problem was. I should have used class instead of Style in the RadzenLink and I had a difficulty with CSS Isolation within Blazor pages. The ::deep pseudo-element worked

index.html

<head>
  ...
  <link href="Home.styles.css" rel="stylesheet">
  ...
</head>

Home.razor

<RadzenLink class="add-content" Path="add-content" Text="here" Target="_blank" />

Home.razor.css

::deep a.add-content, ::deep a:active.add-content, ::deep a:visited.add-content {
    color: deeppink;
    text-decoration-line: none;
}

::deep a:hover.add-content {
    cursor: pointer;
    color: pink;
}