Customizing TableRow Hover Effects in React with Material-UI

Question

Customizing TableRow Hover Effects in React with Material-UI

I've been spinning in circles with this issue. It seems like I just can't grasp how class overrides function in Material-ui.

I attempted to follow the advice in this response: CSS on Material UI components However, it didn't produce any results (no errors). This could be due to me working with a stateful component rather than the stateless one used in the example.

Currently, I am experimenting with the following code...

<TableRow className={styles.tableRow}
    key={n.id} hover
    onClick={event => this.handleRowClick(event, n.id)}
    classes={{ 'hover': {color: '#7EA5FF'}}} >
      <TableCell>&nbsp;</TableCell>
      <TableCell>{n.title}</TableCell>
      <TableCell>{n.author}</TableCell>
</TableRow>

However, I encounter this error message: the key hover provided to the classes property is not valid for TableRow. You need to provide a non-empty string instead of: [object Object].

Any assistance would be greatly appreciated. Thank you.

css reactjs material-ui

Answer 1

Answer №1

Looking at the code snippet you provided, it appears that you have:

className={styles.tableRow}

followed by

classes={{ 'hover': {color: '#7EA5FF'}}

To properly modify your styles, you should include your style adjustments within the declaration of styles.tableRow and remove the className prop as it does not seem to be supported in the API. You can refer to the Material-UI documentation for more information: https://material-ui.com/api/table-row/

Your code should look something like this:

const styles = theme => ({
     tableRow: {
      hover: {
         /// your styles...
        }
     }
});
....

render() {
 // It is recommended to use the classes prop, which corresponds to 
 // the styling obtained from the withStyles HOC function of MUI
 const classes = this.props.classes;
 return (
   <TableRow
    classes={classes.tableRow}
    key={n.id} hover
    onClick={event => this.handleRowClick(event, n.id)}
>
      <TableCell>&nbsp;</TableCell>
      <TableCell>{n.title}</TableCell>
      <TableCell>{n.author}</TableCell>
</TableRow>
 );
}

If you provide the full code of your component in a sandbox or similar tool, I can offer more assistance. I need to see how you declare the styles variable and how you pass it to the component.

Material-UI relies on JSS for styling components, which may be unfamiliar at first.

For a helpful example relevant to your situation, check out: https://material-ui.com/demos/tables/#customized-tables

Additionally, here is a useful documentation link: https://material-ui.com/customization/overrides/#overriding-with-classes

Answer 2

Looking at the code snippet you provided, it appears that you have:

className={styles.tableRow}

followed by

classes={{ 'hover': {color: '#7EA5FF'}}

To properly modify your styles, you should include your style adjustments within the declaration of styles.tableRow and remove the className prop as it does not seem to be supported in the API. You can refer to the Material-UI documentation for more information: https://material-ui.com/api/table-row/

Your code should look something like this:

const styles = theme => ({
     tableRow: {
      hover: {
         /// your styles...
        }
     }
});
....

render() {
 // It is recommended to use the classes prop, which corresponds to 
 // the styling obtained from the withStyles HOC function of MUI
 const classes = this.props.classes;
 return (
   <TableRow
    classes={classes.tableRow}
    key={n.id} hover
    onClick={event => this.handleRowClick(event, n.id)}
>
      <TableCell>&nbsp;</TableCell>
      <TableCell>{n.title}</TableCell>
      <TableCell>{n.author}</TableCell>
</TableRow>
 );
}

If you provide the full code of your component in a sandbox or similar tool, I can offer more assistance. I need to see how you declare the styles variable and how you pass it to the component.

Material-UI relies on JSS for styling components, which may be unfamiliar at first.

For a helpful example relevant to your situation, check out: https://material-ui.com/demos/tables/#customized-tables

Additionally, here is a useful documentation link: https://material-ui.com/customization/overrides/#overriding-with-classes

Answer 3

Answer №2

const styles = makeStyles((theme) => ({
  hoverEffect: {
    "&:hover": {
      backgroundColor: "green !important",
    },
  },
}));

 const customStyles = styles();
<TableRow applyHover={true} customClasses={{hoverEffect: customStyles.hoverEffect,}}/>

Answer 4

const styles = makeStyles((theme) => ({
  hoverEffect: {
    "&:hover": {
      backgroundColor: "green !important",
    },
  },
}));

 const customStyles = styles();
<TableRow applyHover={true} customClasses={{hoverEffect: customStyles.hoverEffect,}}/>

Answer 5

Answer №3

const customStyles = makeStyles((theme) => ({
rowHighlight: {
    "&:hover": {
      backgroundColor: '#7EA5FF'
    }
  }
}));

const highlightClasses = customStyles();

<HoverRow hover className={highlightClasses.rowHighlight}>

Answer 6

const customStyles = makeStyles((theme) => ({
rowHighlight: {
    "&:hover": {
      backgroundColor: '#7EA5FF'
    }
  }
}));

const highlightClasses = customStyles();

<HoverRow hover className={highlightClasses.rowHighlight}>

Answer 7

Answer №4

My implementation utilizes the withStyles (Version 4) feature, which relies on a Higher-Order Component approach. For an additional example, refer to this link.

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:hover': {
      backgroundColor: 'red',
    },
  },
}))(TableRow);

Subsequently,

<StyledTableRow>
   // Custom row logic implemented here
</StyledTableRow>

Answer 8

My implementation utilizes the withStyles (Version 4) feature, which relies on a Higher-Order Component approach. For an additional example, refer to this link.

const StyledTableRow = withStyles((theme) => ({
  root: {
    '&:hover': {
      backgroundColor: 'red',
    },
  },
}))(TableRow);

Subsequently,

<StyledTableRow>
   // Custom row logic implemented here
</StyledTableRow>

Customizing TableRow Hover Effects in React with Material-UI

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Achieving an IE7 opacity background while keeping the text unaffected

Integration issue: React.js is failing to render within a Django project

Is it possible to transform an array of objects into a new array of objects?

Create a continuous integration pipeline utilizing Azure DevOps platform

Recursive React components. String iteration enhancement

Tips for avoiding content appearing beneath overlapping elements

Utilize Material-UI's <Autocomplete /> feature to conduct searches using multiple parameters

Is the CSS content-visibility property compatible with background images?

What specific features does CSS3 offer in terms of background-size properties?

Prevent automatic refreshing of React app on remote devices

How can I prevent having to repeat the getStaticProps function on multiple pages within NextJS?

Transferring a variable from a child component to a parent component within Next.js

Can someone explain how to use JavaScript to make table data fill the entire row in a table?

Having trouble with setting the margin-top of a div?

Displaying a segment of information extracted from a JSON array

Using jQuery to create a Select All Checkbox that toggles a specific class

How to style a div's height responsively behind a circle using CSS

Challenges faced when dealing with MongoDB and the latest version of webpack

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Challenges arise when trying to access environment variables using react-native-dotenv in React