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

Question

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

我在 Material 表中遇到的一个问题是，当输入一个很长的名称时，例如“LONG NAME LONG NAME LONG NAME LONG NAME”，该行会继续，而之前的单词“消失”。

有没有办法包装文本，所以当我输入一个很长的名字时，文本字段会不断扩展？

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

当前问题:



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



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

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

Answer 1

您可以自定义组件，以使它们在可编辑 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