Blazor InputText 无法为 InputText 实现 CSS

Question

InputText 有 1 个问题，即它无法实现 razor.css 文件中的 css。如果直接实现样式，这是可行的，但如果我将其放在 css 文件中，则它不起作用。如果您想知道这是否是由于 css 未连接到 .razor 文件造成的，其他样式仍然有效。

这是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;
}

我正在尝试增加 InputText 的宽度，但如果不手动在 .razor 文件而不是 css 文件中添加样式，它似乎无法工作

Answer 1

由于输入是另一个“组件”并且您正在使用隔离，因此您需要使用

::deep

选择器：

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