Ag-grid React + over riding selected row is not working

Question

am using ag-grid react in my project to load the data. Where as i need to over ride when the row is selected. Am doing it inline style way due to some reason.

code

<Paper className="ag-theme-material"
sx={{
  width: "100%",
  height: "100%",
  " .ag-checkbox-input-wrapper.ag-checked::after": {
    color: theme.general_theme.purpleBlue,
  },
  " .ag-selected-row-background-color": {
    "backgroundColor": "green"
  }
}}>
<AgGrid></AgGrid>
</Paper>

In my above code the check box when its checked, it turned into my purple theme color. The same way am trying to change my selected-row color its not working. Can some one please let me know what is wrong in it.

Answer 1

Let try it

< Paper
className = "ag-theme-material"
sx = {
    {
      width: "100%",
      height: "100%",
      " .ag-checkbox-input-wrapper.ag-checked::after": {
        color: theme.general_theme.purpleBlue,
      },
      "--ag-selected-row-background-color": "green", // Set the selected row color
    }
  } >
  <
  AgGrid > < /AgGrid> <
  /Paper>