如何设置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 class 相同的 div 上定义一个 id 或 class 并将样式应用于它。例如：

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

如何设置MDL TextArea的宽度

How to set width of MDL TextArea

typescript

reactjs

material-design-lite