Isolated CSS files not working for EditForm Inputs-CodePudding

Let's say I have the following elements on a MyComponent.razor file:

<label  for="myInput">Text Field</label>
<InputText  id="myInput" @bind-Value="@Something"/>

If I setup a MyComponent.razor.css file, I'm able to target the label element but not the InputText. Regular HTML inputs work as expected.

label {
  color: blue; /* This works */
}

/* Neither of the following works */
input {
  background: red;
}

.form-control {
  background: red;
}

#myInput {
  background: red;
}

I styled the label to see if there is a caching issue but looks like it's not that.

Inspecting the elements, the input field doesn't use the same generated hash for the App.styles.css class of the component (label and the other elements of the component use b-rbinozve8m, when the input seems to be using this guid _bl_9d02f742-2a91-4e7b-aede-108ae5da9f8a). Perhaps this is where the mismatch occurs and the css can't properly target the input field.

Using inline styles and tags within the razor file works as expected, only the isolated .razor.css file seems to be troublesome.

MyComponent.razor

<!-- This is fine -->
<style>
  .form-control {
     background: red;
  }
</style>

<!-- This is fine too -->
<InputText style="background: red;"  id="myInput" @bind-Value="@Something"/>

It looks like this is an InputText to input conversion issue but I'm not sure if that's the expected behavior or a bug. Using style tags in my razor component is fine but I would rather have it as an isolated file to keep consistency within the project.

CodePudding user response：

InputText is a component therefore it has its own css Isolation. If you want to apply css to child components, you need to use the ::deep pseudo-element.

Docs