InputText：无法为InputText实现CSS

Question

InputText

存在一个问题，即它无法从

razor.css

文件实现CSS。如果直接实现样式，这是可行的，但如果我将其放在

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

由于

InputText

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

::deep

选择器：

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