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.

cssreactjsmaterial-ui

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

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

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

Answer №3

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

const highlightClasses = customStyles();

<HoverRow hover className={highlightClasses.rowHighlight}>

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Google Web Fonts: Exploring the World of Font Weight Variations

It's quite puzzling as to why the weight of my Google web font in the navigation menu keeps changing on different pages even though I have specifically set it to 700. The CSS for the menu is exactly the same across all pages. Can anyone shed some ligh ...

htmlcssfontsfont-sizegoogle-webfonts

Combine collapse and popover in Bootstrap 3 for enhanced functionality

I'm facing some issues trying to use the badge separately from the collapse feature. $(function (e) { $('[data-toggle="popover"]').popover({html: true}) }) $('.badge').click($(function (e) { e.stopPropagation(); }) ) Check o ...

javascriptjquerycsstwitter-bootstrap

Adjusting image size within floating containers

I am working on a design with two floating divs, one on the left and one on the right, both nested within a main div. Each floating div contains an image that needs to be resized to the maximum size possible without differing sizes. This is what I curren ...

cssautoresize

Angular2 - Incorporating a New Attribute

I am working with the following Angular2 code: <ngx-datatable-column prop="id" name="ID"> <template ngx-datatable-cell-template let-row="row" let-value="value"> <a [routerLink]="['/devicedtls',r ...

cssangular

Troubleshooting: Else block not functioning as expected within a React JS map function

I have a notification feature that makes an API call every 10 seconds to display an alert based on the response. However, I'm encountering an issue where the div is not being rendered properly. The div should be displayed based on certain conditions w ...

javascriptreactjs

Using jQuery to select the third element from every group of six

I am attempting to select the 3rd .foo element out of every set of 6. To clarify, here is a brief example: 1 2 3 (this) 4 5 6 1 2 3 (this) 4 5 6 and so on... So far, I have only managed to target every 3rd element, which is not exactly what I need beca ...

javascriptjqueryhtmlcss

Creating a table with a static first column and vertical text positioned to the left of the fixed column

To create a table with the first column fixed, refer to this fiddle link: http://jsfiddle.net/Yw679/6/. You also need a vertical text to be positioned to the left of the fixed column in a way that it remains fixed like the first column. The disparities be ...

javascriptcss

Only one choice for discriminated unions in react props

Looking to create a typescript type for react component props, specifically a basic button that can accept either an icon prop or a text prop, but not both. My initial attempt with a discriminated union didn't quite produce the desired outcome: inter ...

reactjstypescript

Choosing Between EMs and Pixels for Font Sizes: A 2011 Perspective

In the past, EMs were favored over pixels for font size because they could scale with IE6 while pixels could not. Nowadays, modern browsers can handle pixel-sized font scaling correctly. Another advantage of EMs is that they cascade, unlike pixels. But if ...

cssaccessibility

What is the best way to vertically center a button against a video using CSS?

How can I vertically center a button against a video using CSS? Here is my code: https://jsbin.com/curefoyefe/edit?html,css,js,output <video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class= ...

javascripthtmlcss

What is the best way to generate a switch statement based on an enum type that will automatically include a case for each enum member?

While Visual Studio Professional has this feature, I am unsure how to achieve it in VS Code. Take for instance the following Colors enum: enum Colors { Red, Blue, When writing a switch statement like this: function getColor(colors: Colors) { swi ...

reactjstypescriptvisual-studio-codeenumsvscode-snippets

What is the best way to connect data to a different page in Next.js?

I am navigating the learning curve of Next.js and aiming to establish a connection between selected data and a new page through dynamic routes. Despite consulting the documentation, I couldn't get it to work, indicating that there might be an unnotice ...

reactjsmongodbreact-nativenext.jsnext.js13

How can we refresh the React-query cache?

My app is pretty straightforward - it fetches a user and allows for changing their name. I use React query to fetch the user so I can take advantage of the cache feature, which works perfectly. However, when it comes to updating the user, I resort to a ty ...

reactjsasynchronousasync-awaitreact-query

Increasing the size of a div container based on the position of the cursor on the

I recently stumbled upon a fantastic website where two images slide left and right based on mouse movement. When the cursor is on the right, the right part of the image expands, and when it's on the left, the left part expands. You can check out the ...

javascriptjqueryhtmlcss

Node polyfills are essential for AWS SDK Javascript v3 compatibility

I'm currently working on integrating AWS Translate into my React application and I've encountered a roadblock with the Node polyfills. I am unsure if the AWS SDK is meant solely for use with Node.js or if I need to install multiple polyfills. The ...

reactjsamazon-web-servicesaws-sdkaws-sdk-js

Tips for deciding on the appropriate CSS for an Angular 6 navbar component

I am currently working on an angular 6 application where users are assigned different roles that require distinct styling. Role 1 uses Stylesheet 1, while Role 2 uses Stylesheet 2. The Navbar component is a crucial part of the overall layout structure of ...

cssangularstylingangular-router

Encountering an issue with Material-UI and Next.js: "TypeError: theme.spacing is not a function

Encountering an issue after modifying _app.js to dynamically generate a material UI theme. I've been following the implementation example provided by the material-ui team at: https://github.com/mui-org/material-ui/tree/master/examples/nextjs. To summ ...

javascriptreactjsmaterial-uinext.js

Creating a Python panel component in React using pyodide: A step-by-step guide

I'm experimenting with incorporating a panel component from Python using pyodide into a React component instead of pure HTML. I found guidance in the panel documentation, but now I'm facing challenges when trying to render a simple slider. My pro ...

pythonreactjsholovizpyodideholoviz-panel

I'm looking for a way to set up a PropType that accepts a boolean value, but also allows for

Currently, my code includes a Modal component with a prop called disableEscapeKeyDown. The PropType defines it as boolean | null, but when trying to use it in the ModalWindow function, I receive an error stating Type 'boolean | null' is not assig ...

javascriptmaterial-uireact-proptypes

execute a series of asynchronous functions one after another

async function cancelUserSubscriptionHandler() { const unsubscribe = await fetch("/api/stripe-sessions/cancel-subscription", { method: "PATCH", body: JSON.stringify(), headers: { "Content-Type": "appli ...

javascriptreactjs