css - 如何在表格中减少 Material UI TextField 的宽度

Question

我有一个 Material UI Table .

我是这样构建的:

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

Question实际上是一个荣耀[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元素比需要的宽很多，并且似乎有一个最小宽度和一些我无法删除的填充。

表格是全 Angular 的，直到你到达某个点，然后注意这里:

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

作为调查过程，我更改了 Question元素简单地返回“嗨”。完成后，表格将如下所示:

(也就是说，它压缩得很好……顶部、底部和右侧的填充仍然过多，但更好)

所以这让我相信问题出在我的 Question 上成分。我应该注意到这发生在其他 Questions 上同样——当没有为它们定义宽度时，它们似乎都有一个最小宽度……除非它们被放置在一个具有指定宽度的容器中，例如 Material UI Grid。 .例如，当放置在`Grid 中并且窗口缩小时，它们会适当缩小:

那么为什么 Table/TableCell 不像 Grid 那样也缩小 TextField？ (或者:如何删除文本字段上明显的“MinWidth”？)如果没有另外指定，Material UI 文本字段是否具有最小宽度？

为了它的值(value)，我已经尝试指定表格的列宽 - 当表格很宽时成功，但它仍然没有解决明显的最小宽度问题。

我也试过改变 Question组件 <input type="text" name="fname" />并且仍然有同样的问题。有趣的是 Question组件只是“嗨”，问题就消失了，但是当它是输入时，它就会出现。

Answer 1

我发现 native 输入字段的默认宽度为 20 个字符:https://www.w3schools.com/tags/att_input_size.asp

'size' 属性是这里的关键:

Specifies the width of an element, in characters. Default value is 20

设置 TextField 的宽度，您必须将属性传递给 native 输入字段。

If you wish to alter the properties applied to the native input, you can do so as follows:

const inputProps = {
  step: 300,
};

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

对于我的用例，以下内容将 TextFields 的大小修改为 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、表格列、自由流动的 flex 区域和实际的 TextField 元素之间进行游戏……我不太精通，不知道什么总是“赢”。