How to style (add css) to material-table (React)?

Question

I've been searching for a few days now and can't find anything. I'm using material-table in React but can't figure how to add css in headers (columns of the table) and the content [like changing font size, width and making table rows of striped background].

Can anyone tell me how I can do it?

For reference, here's the current Material table I have and I want to make the rows striped and change the look of headers (column names)

<MaterialTable
    title="Title"
    columns={this.state.columns}
    data={newDataTable}
    options={{
      selection: true
    }}
    options={{
      search: false,
      sorting: true
    }}
    actions={[
      {
        icon: () => <Checkbox />,
        tooltip: 'checkbox'
      },
      {
        icon: () => <InfoIcon />,
        tooltip: 'info',
        onClick: (event, item) => {
          this.setState({
            isOpen: true,
            selectedItem: item
          });
        }
      }
    ]}
  />
</div>

Edit: Also, can't figure out how to change the content of the rows. Like for example I want to add an icon in front of every item corresponding to its data. Currently, I'm just using a js array to display the static data but I can't edit it.

Answer 1

Just define the styles within the columns property:

this.setState({
    columns: {[
        {
            title: 'Name', field: 'name',
            cellStyle: {
              backgroundColor: '#039be5',
              color: '#FFF'
            },
            headerStyle: {
              backgroundColor: '#039be5',
            }
          },
          // Other columns
    ]}
});

See https://material-table.com/#/docs/features/styling

Answer 2

if you want to add an icon inside your data( rows/cells), you can use built-in render callback in columns definition like this :

const handleTableColumns = (cols) => {
    return cols.map((col) => ({
        ...col,
        render: (rowData) => {
            return ( 
                <span style = {{display: 'flex'}} >
                    <KeyboardArrowRightIcon /> 
                    { rowData[col.id]} 
                </span>
            );
        };

    }))
};

this will insert the icon <KeyboardArrowRightIcon /> in front of every cell of each row, so in materialTable component you have to use handleTableColumns as columns :

<MaterialTable
    style={{ padding: '0 8px' }}
    columns={this.handleTableColumns(this.state.columns)}
    data={data}
    ...
    ...
/>

Answer 3

Options can be passed with a key rowstyle. Where you can configure the background colour.

 < MaterialTable title = "Title" columns = { this.state.columns } data = { newDataTable } options = { { selection: true, rowStyle: (row) => { const rowStyling = { fontSize: "14px", fontFamily: "latoregular" }; if (row.sl % 2) { rowStyling.backgroundColor = "#f2f2f2"; } return rowStyling; }, } } options = { { search: false, sorting: true, } } actions = { [{ icon: () => < Checkbox / >, tooltip: "checkbox", }, { icon: () => < InfoIcon / >, tooltip: "info", onClick: (event, item) => { this.setState({ isOpen: true, selectedItem: item, }); }, }, ] } />;