While working on implementing a table using the TableRow component from material-ui, I encountered an issue with customizing the background color when the "selected" property is true. The default theme applies a pink background-color in such cases, but I wanted to change this color as per the documentation by overriding the css classes.
const styles = theme => ({
rowSelected: {
backgroundColor: theme.palette.grey[700]
}
})
class CustomTableRow extends React.Component {
// basic component logic
render() {
const {classes, className, style } = this.props;
<TableRow
key={key}
component="div"
selected={true}
hover={true}
className={className}
classes={{ selected: classes.rowSelected}}
style={style}
>
// some children
</TableRow>
}
export default withStyles(styles, { withTheme: true })(CustomTableRow);
However, my attempt to override the default pink color was not successful, which left me puzzled as I had previously achieved similar customization for a Drawer component using the same method.
After debugging all CSS properties with Chrome Dev Tools, it seems that the pink color applied through the code snippet below:
.MuiTableRow-root.Mui-selected, .MuiTableRow-root.Mui-selected:hover {
background-color: rgba(245, 0, 87, 0.16);
My custom class style had lower precedence than this default one, causing it to be greyed out.
UPDATE1:
Due to the complexity of my project, I am unable to simplify it for codesandbox.io. Instead, I considered checking the material-ui source code directly at TableRow Source Code.
I attempted to override the CSS declaration within the root by adding another selected declaration, only to realize that the
&$selected, &$selected:hoverUPDATE2:
Ultimately, I managed to override the background color by appending '!important' to my custom style:
const styles = theme => ({
rowSelected: {
backgroundColor: theme.palette.grey[700] + " !important",
}
})
Although this solution worked, I'm not sure if it's the most ideal approach. This issue highlights the importance of understanding CSS classes precedence and how to effectively override them.
If anyone could provide further assistance, I would greatly appreciate it. Thank you.