I'm facing an issue when trying to apply styles to Blazor/Razor components when I move the styles to a separate CSS file. In my project, I define styles in a .razor component, and when applying styles directly in this file, the styles are correctly applied to the HTML elements within that component and its child components.

However, when I move the styles to a separate .razor.css file and try to include it in the HTML, some styles are not applied correctly to the HTML elements. Specifically, the color style is applied correctly, but the border style is not.

Could someone help me understand why this is happening and how I can fix this issue?

Here's a simplified example of the code:

Case 1 (Ok)

In the Test1.razor file:

<div class="aeae"><h5>Test1 Title</h5></div>

In the Home.razor file:

<div class="aeae"><h5>Home</h5><Test1 /></div><style>    .aeae {        border: 1px solid red;        color: blue;    }</style>

The result is that the "Test1 Title" text is displayed in blue, and the border displayed in red (OK).

Case 2 (??)

In the Home.razor file:

<div class="aeae"><h5>Home</h5><Test1 /></div>/* Removed <style> from Home.razor */- <style>-     .aeae {-         border: 1px solid red;-         color: blue;-     }- </style>

In the Home.razor.css file:

.aeae {    border: 1px solid red;    color: blue;}

The result is that the "Test1 Title" text is displayed in blue, but the red border is not applied to the elements in Test1.razor.

So, obviosly Home.razor.css file is being included correctly in the HTML and if there are no syntax errors. However, I can't understand why the color style is applied correctly but the border style isn't.