I have script like this ,
<TableBody sx={{"& .MuiTableRow-root:hover": {
backgroundColor: "#DDDDDD"
}}} >
<TableRow><TableCell>test1</TableCell></TableRow>
<TableRow><TableCell>test2</TableCell></TableRow>
<TableRow><TableCell>test3</TableCell></TableRow>
</TableBody>
it works correctly when mouse comes to the row the row color changes.
However now I want to change the color for each row.
When mouse pointer comes to test1 backgroundColor will be “#FFFFFF”
When mouse pointer comes to test2 backgroundColor will be “#DDDDDD”
When mouse pointer comes to test2 backgroundColor will be “#222222”
I guess I should set the sx in each TableRow, but I guess & .MuiTableRow-root:hover should be changed.
How can I make this?