我有一个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
元素的宽度超出了所需的宽度,并且似乎具有最小宽度和一些无法删除的填充。
该表是全角的,直到到达特定点为止,然后在这里注意:
当窗口缩小到特定水平以下时,表不会进一步缩小。就像内部的元素具有最小宽度一样。
作为调查的过程,我将Question
元素更改为仅返回“ Hi”。完成后,该表将如下所示:
(也就是说,它凝结得很好……顶部,底部和右侧的填充仍然太多,但是效果更好)
因此,我认为问题出在我的Question
组件上。我应该注意,在其他Questions
上也会发生这种情况-当未为它们定义宽度时,它们似乎都具有最小宽度...除非它们被放置在具有指定宽度的容器内,例如Material UI Grid。例如,当放置在“网格”中且窗口缩小时,它们会适当缩小:
那么为什么Table / TableCell不能像Grid一样缩小TextField? (或:如何删除textField上明显的“ MinWidth”?)如果未另行指定,则材料UI TextField是否具有最小宽度?
对于它的价值,我尝试指定表的列宽-当表宽时成功,但是它仍然不能解决明显的最小宽度问题。
我也尝试将Question
组件更改为<input type="text" name="fname" />
,但仍然遇到相同的问题。有趣的是,Question
组件只是“嗨”,问题消失了,但是当它是输入时,它就会出现。
答案 0 :(得分:0)
我发现本机输入字段的默认宽度为20个字符:https://www.w3schools.com/tags/att_input_size.asp
“大小”属性是关键:
以字符为单位指定元素的宽度。默认 值是20
要设置TextField的宽度,必须将属性传递到本机输入字段。
如果您希望更改应用于本机输入的属性,则可以 可以这样做,如下:
const inputProps = {
step: 300,
};
return <TextField id="time" type="time" inputProps={inputProps} />;
对于我的用例,以下内容将TextField的大小修改为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
,表格列,自由流动的伸缩区域和实际的TextField元素...我不熟悉什么总是“赢”。