ReactJS - 在为新行输入数据时如何将单元格文本包装在 MaterialTable 中?

ReactJS - How could I wrap the cell text in MaterialTable when typing in data for a new row?

问题:在MaterialTable中输入异常长的名字时是否可以换行?

我在使用 Material Table 时遇到的一个问题是在输入很长的名称时,例如 "LONG NAME LONG NAME LONG NAME LONG NAME" 该行继续,而前面的词 "disappear".

有没有一种方法可以让文本换行,这样当我输入一个很长的名字时,文本字段会不断扩展?

代码:https://codesandbox.io/s/material-demo-vnk66

当前一期:

我想尝试做的事情,文本在方框内换行。

我尝试做的是在 MaterialTable 声明中内联样式,然后在我拥有的外部元素中,但这不起作用:

style = {{
    whiteSpace: "normal", 
    wordWrap: "break-word",
}}

您可以自定义组件,以使它们在可编辑的 material 表格中完全按照您的意愿运行。例如,如果你想要多行 TextField 你可以这样做:

columns: [
  {
    title: "Name",
    field: "name",
    editComponent: ({ value, onChange }) => (   
      <TextField
        onChange={e => onChange(e.target.value)}
        value={value}
        multiline
      />
    )
  },
  ...
] 

演示:https://codesandbox.io/s/material-demo-8ysj5