Question

我想将display设置为inline-block，但是cellStyle不需要是否认识到有替代方法？
我如何修改特定列的宽度，假设名称为 title而不更改所有列的宽度？

注释

这可行，但是我也想添加其他样式道具，但是我不知道怎么做

column.push({
   title:key,
   field:key,
   cellStyle: {
     backgroundColor: '#039be5',
     color: '#FFF',
  },
})

App.js

const MyComponent = () => {
    return (
        <div style={{ maxWidth: "100%" }}>
            <MaterialTable
                icons={tableIcons}
                columns={column}
                data={data}
                title="Demo Title"
                options={{
                    rowStyle: {
                       fontSize:10,
                      },
                    }}
            />
        </div>
    )
};

export default MyComponent

Answer 1

1。带有道具的自定义样式

将M移动到组件外部，并使其成为N，它返回对象数组。在jsx中，调用传递您的props / state的函数。

2。自定义宽度

在选项中使用column属性并将其设置为function，并在tableLayout数组中提供fixed。注意：有一个未解决的错误，请密切注意。一旦解决，如果您的代码中断，请参考问题解决方案。

Working demo

完整代码段

width

注意-材质表1.25（及以下）请确保在columns

内提供宽度

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: "40%" //<---- here
  },
  { 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"
    }
  }
];

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,
                    page: result.page - 1,
                    totalCount: result.total
                  });
                });
            })
          }
          title="Remote Data Example"
          options={{ tableLayout: "fixed" }} //<------here
        />
        <button
          onClick={() => {
            this.tableRef.current.onQueryChange();
          }}
        >
          ok
        </button>
      </div>
    );
  }
}

如何添加可在reactjs的材料表中使用的样式

1 个答案: