InputText : unable to implement CSS for InputText

Question

There is an issue with the InputText which is that it is unable to implement CSS from the razor.css file. This works if implementing the styling directly, but if it is not working if I am placing it in the razor.css file.

If you are wondering if this is due to CSS not connected to the .razor file, the other styling still works.

This is CreateContent.razor file:

<EditForm Model="diaryContent" OnSubmit="HandleSubmit" FormName="createEditForm">
    <table>
        ...
        <tr>
            <td class="title">
                <label>Diary Content</label>
            </td>
            <td class="details">
                <InputText @bind-Value="diaryContent.Content"
                           class="large-input"
                           title="Enter your diary content here"
                           placeholder="Write your diary content here..." 
                           />
            </td>
        </tr>
        ...
    </table>
    <br/>
</EditForm>

This is CreateContent.razor.css:

.large-input {
    width: 100%;
    height: 40px;
}

I am trying to increase the width of InputText, but it seems will not work without manually adding style in the .razor file instead of CSS file

Answer 1

As InputText is another "Component" and you are using isolation you need to use the ::deep selector:

::deep .large-input {
    width: 100%;
    height: 40px;
}