如何在 reactjs 中添加适用于 material table 的样式

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.使用道具自定义样式

将 column 移到组件外部并使其成为 function 其中 returns 对象数组。在 jsx 中，调用传递 props/state.

的函数

2。自定义宽度

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

Working demo

完整代码片段

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>
    );
  }
}

注意 - material-table 1.25（及以下） 确保在 cellStyle

内提供宽度

cellStyle: {
      backgroundColor: "#039be5",
      color: "#FFF",
      width: 10 //<-----like this
    },

如何在 reactjs 中添加适用于 material table 的样式

How to add styling which works in material table in reactjs

css

reactjs

material-ui

material-table