如何在表格中让Material UI的TextField变窄

Question

我有一个Material UI 表格。

我是这样构建它的：

tableValues.map((curRow, row) => {
    tableRows.push(
        <TableRow key={this.state.key + "_row_" + row}> 
        {curRow.map((cellContent, col) => {
        let adHocProps = {...this.props, type:"Text", label:"", value:cellContent}

        return (
            <TableCell className={classes.tableCell} key={this.props.key + "_row:" + row + "_col:" + col}>
                {col===0 && this.props.rowHeaders ?
                <div className={classes.header}>{cellContent}</div> :
                <Question {...adHocProps} stateChangeHandler={this.handleTableChange("in build")} />}
            </TableCell>
        )})}
        </TableRow>
        );
    return null;
});

return (
    <Table key={this.props.key + "_table"} className={classes.table}>
        <TableHead>
            <TableRow>
                {this.props.colHeaders.map((header) => <TableCell className={classes.tableCell} key={this.props.id + header}><div className={classes.header}>{header}</div></TableCell>)}
            </TableRow>
        </TableHead>
    <TableBody>
        {tableRows}
    </TableBody>
</Table>
);

这个“问题”实际上是一个经过美化的“[TextField]”2，如下所示：

            <div>
                <TextField
                    value={this.state.value}
                    onChange={this.handleTextChange(this.props.key)}
                    key={this.props.key}
                    id={this.props.id}
                    label={this.props.label}
                    placeholder={realPlaceholder}
                    className={classes.textField}
                    fullWidth
                    xmlvalue={this.props.XMLValue}                      
                />
            </div>

...然后用Paper包装。

样式为：

tableCell: {
    padding: 5,
},
textField: {
    padding: 0,
    margin: 0,
    backgroundColor: "#191",
}

这个可以做，每个单元格中都有适当的内容...但是Question元素比需要的宽得多，似乎有一个最小宽度和一些无法删除的填充。

表格是全宽的，直到达到某个点，然后注意到这里：

当窗口缩小到一定程度时，表格不会再进一步缩小。就好像里面的元素有一个最小宽度一样。

作为调查的过程，我将Question元素更改为简单地返回“Hi”。这样做后，表格看起来是这样的：

这意味着它能够很好地压缩...顶部、底部和右侧仍然有太多的填充，但是已经好多了。

因此，我认为问题出在我的“Question”组件上。值得注意的是，这也发生在其他“Questions”上——当它们没有定义宽度时，它们似乎都有一个最小宽度...除非它们放置在具有指定宽度的容器中，例如Material UI Grid。例如，当它们放置在一个“Grid”中并且窗口被缩小时，它们会适当地缩小：

那么为什么Table/TableCell没有像Grid一样缩小TextField呢？（或者说：如何删除我的textFields上的明显“MinWidth”？）Material UI的TextField是否有最小宽度，如果没有其他指定的话？

值得一提的是，我尝试过指定表格的列宽 - 当表格很宽时成功了，但仍未解决明显的最小宽度问题。

我还尝试将组件更改为，但仍然存在同样的问题。有趣的是，当组件只是“hi”时，问题消失了，但当它是一个输入时，问题就出现了。

- lowcrawler

Answer 1

我发现本地输入字段的默认宽度为20个字符：https://www.w3schools.com/tags/att_input_size.asp 这里关键是“size”属性：

指定元素的宽度，以字符为单位。默认值为20。

要设置TextField的宽度，必须向本地输入字段传递属性。

如果您想修改应用于本地输入的属性，可以按以下方式操作：

const inputProps = {
  step: 300,
};

return <TextField id="time" type="time" inputProps={inputProps} />;

根据我的使用情况，以下修改了文本字段的大小为10个字符大小：

<TextField
                    value={this.state.value}
                    onChange={this.handleTextChange(this.props.key)}
                    key={this.props.key}
                    id={this.props.id}
                    label={this.props.label}
                    placeholder={realPlaceholder}
                    className={classes.textField}
                    fullWidth
                    xmlvalue={this.props.XMLValue}   
                    inputProps={{
                        size: 10
                    }}                      
                />

很遗憾，这有点模糊......它既没有精确地保持输入字段的size，也没有像最小尺寸一样处理它......在GridItems、表格列、自由流动的弹性区域和实际的文本字段元素之间似乎存在某种大小的层次结构，而我不太熟悉总是“获胜”的内容。

- lowcrawler

---

很棒的答案。inputProps正是我所需要的。我将其修改为适应值长度的大小，像这样：let htmlAtrrSize = String(row[name]).length; 然后 inputProps={{size: htmlAtrrSize,}} - Michael