如何设置MDL TextArea的宽度

Question

设置Material Design Lite多行TextField宽度的最佳方法是什么？我将CSS宽度设置为像素值，它可以工作，但是当您单击它以输入一些文本时，下划线突出显示不会扩展到组件的整个宽度。我尝试cols =“80”，但没有用。我也试过width =“100％”，但是没有用。我正在使用ReactJS和TypeScript，如果这有所不同。

Answer 1

需要在文本字段的mdl-textfield容器div上设置宽度。例如，这有效：

.mdl-textfield{
    width:500px;
}

虽然这样可以设置所有文本字段的样式。如果你只想要其中一个那么宽，那么在与mdl-textfield类相同的div上定义一个id或类，并将样式应用于该类。例如：

<div class="mdl-textfield mdl-js-textfield extrawide">
    <input class="mdl-textfield__input" type="text" id="sample1">
    <label class="mdl-textfield__label" for="sample1">Text...</label>
</div>

使用css

.extrawide{
    width:500px;
}