Material-table: How do I change the default color for row hover?
I'm trying to change the default color for the row hover event. As I see it, the default seems to be,
.MuiTableRow-root.MuiTableRow-hover:hover {
background-color: 'rgba(0, 0, 0, 0.07)';
}
How do I change it from the React component?
Many thanks!
rxhl
All 22 comments
Any updates?
rxhl
on 16 Jul 2019
import React from 'react';
import ReactDOM from 'react-dom';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
const theme = createMuiTheme({
overrides: {
MuiTableRow: {
hover: {
backgroundColor: 'green',
}
}
}
});
ReactDOM.render(
<ThemeProvider theme={theme}>
<App/>
</ThemeProvider>
, document.getElementById('root'));
PiAlexay
on 16 Jul 2019
Thanks @PiAlexay but the solution doesn't seem to work. Do you have a working code sandbox example?
rxhl
on 16 Jul 2019
Look at the code again. What is your problem?
PiAlexay
on 16 Jul 2019
@PiAlexay It does not work, the MuiTableRow component is not getting overwritten. You can check it yourself. cc @mbrn
rxhl
on 30 Jul 2019
@rxhl, the answer provided by @PiAlexay does more or less work.
E.g., to change the color by hovering over a single cell:
const themeTable = createMuiTheme({
overrides: {
MuiTableCell: {
root: {
"&:hover": {
backgroundColor: "rgba(33, 150, 243, 0.5)"
}
}
}
}
});
Furthermore, MaterialTable must be wrapped by a MuiThemeProvider component, e.g.
<MuiThemeProvider theme={themeTable}>
*---YOUR TABLE---*
</MuiThemeProvider>
JThissen
on 31 Jul 2019
If you're looking for a dirty, but simple + quick way of achieving a row-hover do this:
Insert anywhere on the page:
<div dangerouslySetInnerHTML={{__html: "<style>.MuiTableRow-root:hover{ background: #dedede !important }"}}></div>
Sometimes the "react-way" just overcomplicates CSS-overriding like a rube-goldberg-machine ;-)
masbaehr
on 2 Sep 2019
@masbaehr That's why I ended up doing. The solutions by @PiAlexay and @JThissen do not work for me, maybe because I already had a top level theme and no matter how I wrap the MaterialTable in the ThemeProvider, it just won't work.
This is what I did in the root-level App.css file.
.MuiTableRow-root:hover {
background: #dedede !important
}
Putting workaround in root-level css (and i think also in other css) has one drawback though - once loaded it will be there until a full page reload. So assuming you want this to happen only on some pages, it's still problematic. I think the better solution would be to add such a feature directly in to the table component (e.g. like there is rowStyle there should also be rowStyleHover)
masbaehr
on 3 Sep 2019
If anyone read this, that's how I did it :
const tableTheme = createMuiTheme({
overrides: {
MuiTableRow: {
hover: {
"&:hover": {
backgroundColor: "rgba(33, 150, 243, 0.25) !important"
}
}
}
}
});
<ThemeProvider theme={tableTheme}>
<MaterialTable
...
onRowClick={(event, rowData) => {
console.log(rowData);
}}
...
/>
</ThemeProvider>
The onRowClick assignement enable hover in the grid, the theme override the style of the hover.
GBincaz
on 28 Oct 2019
I'm trying to change the default color for the row hover event. As I see it, the default seems to be,
.MuiTableRow-root.MuiTableRow-hover:hover { background-color: 'rgba(0, 0, 0, 0.07)'; }How do I change it from the React component?
Many thanks!
I'm not quite sure why do all these people recommend patching the theme ;-)
This is how I did it:
const useStyles = makeStyles(theme => ({
table: {
'& tbody>.MuiTableRow-root:hover': {
background: 'red',
}
},
}));
function MyTable() {
const classes = useStyles();
return (
<div className={classes.table}>
<MaterialTable .../>
</div>
);
}
The thing is - passing className to the <MaterialTable> element wouldn't help because it sort of screws up standard MaterialUI techniques a little.
OnkelTem
on 11 Nov 2019
Struggling to enable hover for rows, anyone care to explain how they even got a default row hover behavior?
Davst
on 11 Jan 2020
If anyone read this, that's how I did it :
const tableTheme = createMuiTheme({ overrides: { MuiTableRow: { hover: { "&:hover": { backgroundColor: "rgba(33, 150, 243, 0.25) !important" } } } } }); <ThemeProvider theme={tableTheme}> <MaterialTable ... onRowClick={(event, rowData) => { console.log(rowData); }} ... /> </ThemeProvider>The onRowClick assignement enable hover in the grid, the theme override the style of the hover.
Thank you for the OnRowClick making the style to be applied...
Edit : Older version this does not work anymore! You can skip the ThemProvider thanks to (
rowStyle: {
"&:hover": { backgroundColor: "#EEE" }
}
}}`
Pat1420
on 18 Jan 2020
hi,
options={{ rowStyle: { "&:hover": { backgroundColor: "#EEE" } } }}
its not working man
@Pat1420
Alarees
on 17 Jun 2020
hi,
options={{ rowStyle: { "&:hover": { backgroundColor: "#EEE" } } }}its not working man
@Pat1420
You are right, Seems not working anymore with the last version was working for an older version it seems .....i will update my post. thanks for the feedback
Pat1420
on 18 Jun 2020
This works for me:
createStyles({
rowHover: {
"&:hover": {
cursor: "pointer",
backgroundColor: "rgba(87, 197, 111, 0.13) !important"
}
}
})
<TableRow key={row} hover classes={{ hover: classes.rowHover }}>
<TableCell>
{row}
</TableCell>
</TableRow>
If you want a working example component:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
rowHover: {
"&:hover": {
cursor: "pointer",
backgroundColor: "rgba(87, 197, 111, 0.13) !important"
}
}
})
);
const TableView: React.FC = () => {
const classes = useStyles();
return (
<TableContainer component={Paper}>
<Table aria-label="simple table">
<TableHead>
<TableRow>
<TableCell align="left">Name</TableCell>
</TableRow>
</TableHead>
<TableBody>
{["bob", "jimmy", "larry"]
.map((row) => (
<TableRow key={row}
hover
classes={{
hover: classes.rowHover
}}
>
<TableCell>
{row}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
RidhwanDev
on 30 Jun 2020
hi,
options={{ rowStyle: { "&:hover": { backgroundColor: "#EEE" } } }}its not working man
@Pat1420
Hello, I have the same problem and I can't solve it! did you manage to put the styling by rowStyle on the hover?
rowStyle: row => {
const { id } = row.tableData;
return {
backgroundColor: id % 2 ? colors.lighter : colors.white,
'&:hover': { backgroundColor: colors.darker },
};
},
not working!
osvaldokalvaitir
on 24 Jul 2020
Any solution?
osvaldokalvaitir
on 13 Sep 2020
Just had a look on this again and another solution to avoid overriding theme is to override the component MTableBodyRow
<MaterialTable
components={{
Row: (props) => (
<MTableBodyRow className={classes.tableRow} {...props} />
)}}
MTableBodyRow is imported from material-table
import MaterialTable, { MTableToolbar, MTableBodyRow } from "material-table";
and thanks to
const useStyles = makeStyles({
tableRow: {
"&:hover": {
backgroundColor: "#2BCB4E!important",
},
},
});
it makes the job...
Pat1420
on 13 Sep 2020
import React from 'react'; import ReactDOM from 'react-dom'; import { createMuiTheme } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; const theme = createMuiTheme({ overrides: { MuiTableRow: { hover: { backgroundColor: 'green', } } } }); ReactDOM.render( <ThemeProvider theme={theme}> <App/> </ThemeProvider> , document.getElementById('root'));
Works perfectly fine for me. Thank you.
ThaFurther
on 30 Sep 2020
There is a prop called hover on MuiTableRow. you need to use along with theme overrides (if you want a different color).
other aproach could be setting :hover for root className:
MuiTableRow: {
root: {
'&:hover': {
backgroundColor: 'green'
}
}
},
si7o
on 29 Oct 2020
@rxhl, the answer provided by @PiAlexay does more or less work.
E.g., to change the color by hovering over a single cell:
const themeTable = createMuiTheme({ overrides: { MuiTableCell: { root: { "&:hover": { backgroundColor: "rgba(33, 150, 243, 0.5)" } } } } });
Furthermore, MaterialTable must be wrapped by a MuiThemeProvider component, e.g.
<MuiThemeProvider theme={themeTable}> *---YOUR TABLE---* </MuiThemeProvider>
Just like to add on in case anyone has the same requirements as me. Upon TableRow-hover for TableBody, i wanted to color the font color of all TableCells on the hovered row.
And since i will be using the same styled table numerous times in different pages, i wanted to override the theme so i didn't have to repeatedly specify the style in each row/table.
30 minutes of intense trial and error didn't yield any useful results, but learnt enough to understand how it worked.
This is how i did it:
```
const theme = createMuiTheme({
overrides: {
MuiTableRow: {
root: {
'&.MuiTableRow-hover:hover': {
cursor: 'pointer',
'& .MuiTableCell-body': {
color: sharedColor.hover
}
}
}
}
}
})
...
````
If anyone has a better way of overriding, please do share
zhonghankong
on 16 Dec 2020
Related issues
bohrsty
路
3Comments
KKrisu
路
3Comments
balibou
路
3Comments
Mihier-Roy
路
3Comments
revskill10
路
3Comments
Most helpful comment
If anyone read this, that's how I did it :
The onRowClick assignement enable hover in the grid, the theme override the style of the hover.