如何修复 material-ui 中的文本/数据溢出？答案

【问题标题】：How do i fix the text/data overflow in material-ui?如何修复 material-ui 中的文本/数据溢出？
【发布时间】：2020-07-02 20:11:28
【问题描述】：

我正在使用来自material-ui 的MaterialTable，我遇到的问题是在我的手机尺寸中，我的表格中的数据往往会溢出。这在普通桌面模式下不是问题。我该如何解决这个问题。

<MaterialTable
      className={classes.table}
      title="Editable Example"
      columns={state.columns}
      data={state.data}
      options={{
        padding: "dense",
        tableLayout: "fixed",
        actionsColumnIndex: -1,
        exportButton: true,
      }}
      editable={{
        onRowAdd: (newData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.push(newData);
                return { ...prevState, data };
              });
            }, 600);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              if (oldData) {
                setState((prevState) => {
                  const data = [...prevState.data];
                  data[data.indexOf(oldData)] = newData;
                  return { ...prevState, data };
                });
              }
            }, 600);
          }),
        onRowDelete: (oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.splice(data.indexOf(oldData), 1);
                return { ...prevState, data };
              });
            }, 600);
          }),
      }}
    />

下面是问题的视觉效果

【问题讨论】：

要解决此问题，您可以设置文本样式，使其具有overflow: none; text-overflow: ellipsis; white-space: nowrap。但我认为你的问题也是你在一个很小的移动屏幕上有 7 列。你的设计应该以一种可用的方式来适应移动用户，仅仅因为列可以压扁并不意味着它是实用的。

标签： reactjs material-ui material-table

【解决方案1】：

这可以通过将 rowStyle 添加到选项来解决。这里有一个演示示例Live Demo

options={{
    padding: "dense",
    tableLayout: "fixed",
    actionsColumnIndex: -1,
    exportButton: true,
    rowStyle: {
      wordWrap: 'break-word',
    },
  }}

【讨论】：

这通过扩展行高独特地解决了这个问题，但是有没有办法让表格水平滚动以覆盖溢出？

【解决方案2】：

您可以通过两种方式解决您的问题。

使用溢出并将其设置为scroll 或hidden 或您选择的任何内容（但不是none）

{
    title: "col1",
    field: "col1",
    cellStyle: {
      overflow: "scroll"
    }
  },

删除 tableLayout：已修复 去掉options中的tableLayout，会自动得到水平滚动

Working demo

完整代码sn-p

const columns = propValue => [
  {
    title: "Avatar",
    field: "avatar",
    render: rowData => (
      <img
        style={{ height: 36, borderRadius: "50%" }}
        src={rowData.avatar}
        alt=""
      />
    ),
    cellStyle: {
      backgroundColor: "#039be5",
      color: "#FFF"
    },
    width: "14%" //<---- here
  },
  {
    title: "col1",
    field: "col1",
    cellStyle: {
      overflow: "scroll"
    }
  },
  {
    title: "col2",
    field: "col2",
    cellStyle: {
      overflow: "auto"
    }
  },
  {
    title: "col3",
    field: "col3",
    cellStyle: {
      overflow: "hidden"
    }
  },
  { title: "Id", field: "id" },
  { title: "First Name", field: "first_name" },
  {
    title: "Last Name",
    field: "last_name",
    cellStyle: {
      backgroundColor: "#039be5",
      color: "#FFF",
      display: propValue ? "inline-block" : "block" //<---- here
    }
  }
];

class App extends Component {
  tableRef = React.createRef();
  propValue = true;

  render() {
    return (
      <div style={{ maxWidth: "100%" }}>
        <MaterialTable
          tableRef={this.tableRef}
          columns={columns(this.propValue)}
          data={query =>
            new Promise((resolve, reject) => {
              let url = "https://reqres.in/api/users?";
              url += "per_page=" + query.pageSize;
              url += "&page=" + (query.page + 1);
              fetch(url)
                .then(response => response.json())
                .then(result => {
                  resolve({
                    data: result.data.map(x => ({
                      ...x,
                      col1:
                        "overflow scroll overflow scroll overflow scroll overflow scroll ",
                      col2:
                        "overflow auto overflow auto overflow auto overflow auto ",
                      col3:
                        "overflow hidden overflow hidden overflow hidden overflow hidden"
                    })),
                    page: result.page - 1,
                    totalCount: result.total
                  });
                });
            })
          }
          title="Fix overlap issue"
          options={{ tableLayout: "fixed" }} //<------here
        />
        <button
          onClick={() => {
            this.tableRef.current.onQueryChange();
          }}
        >
          ok
        </button>
      </div>
    );
  }
}

【讨论】：