return (
      <div style={{ height: '75vh', width: '94%', position: 'absolute', top: '9vh', zIndex: 5, marginLeft: '3vw', marginTop: '1.8vh', border: '0.1vh solid black' }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pagination
          pageSize={17} 
          pageSizeOptions={[17, 25, 50]} 
          getRowId={(row) => row.rowID}
          
          getRowClassName={(params) => 
            `${
              params.row.missingvalue ? 'alternateColor ' :
              params.row.notredacted ? 'notredacted ' :
              params.row.overday ? 'overdayColor ' :
              params.row.overWeek ? 'oneWeek ' :
              params.row.overMonth ? 'oneMonth ' :
              'customColor' 
            } MuiDataGrid-row`
          }
          onRowClick={(params) => handleClick(params.row.id)}
          sx={{
            '& .MuiDataGrid-cell': {
              color: 'white',
              fontWeight: 'bold',
            },
            '& .MuiDataGrid-columnHeaders': {
              backgroundImage: 'linear-gradient(to bottom right, #342E2E, #2c1456)',
              color: 'black',
            }
          }}
        />
      </div>
    );

I have been working on a table that uses colors to call out some of the rows. I have it so that it defines a class in ‘getRowClassName’ that is based upon certain properties of each row, which is assigned properly on render to each row. However, the problem comes with the entries that do not have a special color, and instead default to the ‘customColor’ class. The customColor is defined within the row object, which is utlized to render the table and define the other classes, and can be access with param.row.color. However, I have been unable to pass this value to the customColor class which results in it not utilizing the color set for it.

Initially, I tried to pass (param) to the sx function (inline css styling in MUI) to directly assign the color variable:

         sx={{
            '& .MuiDataGrid-cell': {
              color: 'white',
              fontWeight: 'bold',
            },
            '& .MuiDataGrid-columnHeaders': {
              backgroundImage: 'linear-gradient(to bottom right, #342E2E, #2c1456)',
              color: 'black',
            },
            '& .MuiDataGrid-row': {
               backgroundColor: var(--color) or params.row.color  //tried both of these
           }
          }}

When this failed, I tried to see if I could pass params into the sx function at all, but nothing would work. So then, I instead tried to define a separate class in my css file that took a variable:

.variableColor{
  background-color: var(--color);
}

However, this did not function any better, and am at a loss how I can take the color stores in params.row.color to assign to the row as a default assuming no special row colors are valid.

**Also, minor addendum, I am also having issues where my pagination limits and settings are getting overridden to 100 per page no matter what. Help would be appreciated there as well.