Suppose I have the elements below on a MyComponent.razor file:
<label class="form-label" for="myInput">Text Field</label>
<InputText class="form-control" id="myInput" @bind-Value="@Something"/>
When setting up a MyComponent.razor.css file, targeting the label element is possible but not the InputText. Regular HTML inputs function correctly.
label {
color: blue; /* This works */
}
/* The following do not work */
input {
background: red;
}
.form-control {
background: red;
}
#myInput {
background: red;
}
I styled the label to check for caching issues, which does not seem to be the problem.
Upon inspecting the elements, it appears that the input field uses a different generated hash compared to the App.styles.css class of the component (label and other elements use b-rbinozve8m, while the input seems to use
_bl_9d02f742-2a91-4e7b-aede-108ae5da9f8aInline styles and < style > tags within the razor file work as expected, with only the isolated .razor.css file proving troublesome.
MyComponent.razor
<!-- This is fine -->
<style>
.form-control {
background: red;
}
</style>
<!-- This is fine too -->
<InputText style="background: red;" class="form-control" id="myInput" @bind-Value="@Something"/>
This appears to be an issue with converting InputText to input, but it's unclear if this is expected behavior or a bug. While using style tags in my razor component is acceptable, I prefer having it in an isolated file for consistency across the project.