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