如何设置 MDL TextArea 的宽度

【问题标题】：How to set width of MDL TextArea如何设置 MDL TextArea 的宽度
【发布时间】：2016-06-13 21:14:38
【问题描述】：

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

【问题讨论】：

标签： reactjs typescript material-design-lite

【解决方案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;
}

【讨论】：

太棒了。感谢您的信息。