Blazor中InputText无法加载razor.css文件样式的问题求助

我现在遇到了一个棘手的问题：Blazor的InputText组件没办法应用对应razor.css文件里的样式。如果直接给组件写内联样式是有效的，但把样式放在组件专属的razor.css文件里就完全不起作用。而且我能确定这个razor.css文件是和组件正确关联的，因为文件里的其他样式都能正常生效。

以下是我的代码情况：

CreateContent.razor 代码 #

<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>

CreateContent.razor.css 代码 #

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

我原本想通过.large-input样式把InputText的宽度设为100%、高度设为40px，但目前只有把样式直接写在组件的style属性里（比如style="width:100%;height:40px;"）才有用，用razor.css里的样式就完全没反应，有没有大佬能帮忙看看这是怎么回事呀？

备注：内容来源于stack exchange，提问作者Lim Soong Xian