Material-table: Please tell me how add a style to edit-row

[TakujiKawamoto]

I want to add a style to edit-row. What should I do?

In material-table/src/components/m-table-cell.js, add cellStyle to TableCell.

      <TableCell
        size={this.props.size}
        {...cellProps}
        style={this.getStyle()}
        align={['numeric'].indexOf(this.props.columnDef.type) !== -1 ? "right" : "left"}
        onClick={this.handleClickCell}
      >
        {this.props.children}
        {this.getRenderValue()}
      </TableCell>

But, in material-table/src/components/m-table-edit-row.js, does not add cellStyle to TableCell.

            <TableCell
              key={columnDef.tableData.id}
              align={['numeric'].indexOf(columnDef.type) !== -1 ? "right" : "left"}
            >
              <EditComponent
                key={columnDef.tableData.id}
                columnDef={cellProps}
                value={value}
                rowData={this.state.data}
                onChange={value => {
                  const data = { ...this.state.data };
                  setByString(data, columnDef.field, value);
                  // data[columnDef.field] = value;
                  this.setState({ data });
                }}
                onRowDataChange={data => {
                  this.setState({ data });
                }}
              />
            </TableCell>

[flyingangel]

You can use cellStyle https://material-table.com/#/docs/all-props

[TakujiKawamoto]

I tried it. But did not change the style in the cell was in editing.
Of course, it applied to the cell, when the cell was not in editing.

[jayarjo]

@TakujiKawamoto

I encourage you to ask material-table related questions on StackOverflow, so that others could benefit from them as well. I will respond on StackOverflow, if you create a question and link it here.

[mehuljariwala]

hey @TakujiKawamoto you can override the css by using MUI theme Provider.

[flyingangel]

@mehuljariwala Yes he can. But he simply pointed out that that table cell component of table-cell.js and table-edit-row.js are inconsistent. The 2 must keeps the same style property. Best is to fix directly in the material-table core.

[jayarjo]

@TakujiKawamoto, @flyingangel Author of this library has some troubles, if you folks do know what should be fixed in the core, consider making a PR please.

[ShevaShen]

I am able to find a way by passing a class to the EditRow. Then you can style the class.
components={{ EditRow: props => ( <MTableEditRow {...props} className={classes.editingRow} /> ) }}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.