ARTICLE AD BOX
The reason your styles stop working when moved to a .razor.css file is CSS Isolation. Blazor adds a unique identifier (like b-12345xyz) to your component's HTML elements and the corresponding CSS rules to prevent styles from "leaking" to other components.
However, MudBlazor components (like MudButton or MudDivider) are rendered as child components. By default, CSS isolation only applies to HTML elements directly defined in your .razor file, not to the internal elements of child components.
To fix this, you need two things:
1. Use the ::deep Combinator
The ::deep selector tells Blazor to apply the style to any descendant element, even if it belongs to another component.
/* Inside Component.razor.css */ ::deep .rounded-pill { border-color: #b8d6ff !important; } ::deep .rounded-pill .mud-divider { border-color: #b8d6ff !important; } ::deep .appointments-tab-add-btn:hover { background: #e2f5e7aa; }2. Ensure a Root Wrapper
For ::deep to work, the elements you are targeting must be descendants of an element that the CSS isolation mechanism "recognizes." If a MudBlazor component is the very first thing in your file, it might not have the isolation identifier.
Wrap your code in a div or use the MudPaper as the anchor:
<div class="my-custom-container"> <MudPaper ...> </MudPaper> </div>Note: If you use a div wrapper, the CSS should ideally look like this: .my-custom-container ::deep .rounded-pill. This ensures the scope is correctly identified.
