score:0

if you're using withstyles you can just override it in the root element like so:

an example of how to do it is here: https://codesandbox.io/s/7249117670

score:0

just in case, if you are using the component overrides and want to do a style override you have to target the root and not the hover rule. i spent quite a while trying to get the pseudo :hover to work on that but it wouldn't ever work.

here's what i have.

muitablerow: {
    styleoverrides: {
        // even though there is a hover rule we have to override it here. don't ask.
        root: {
            '&.muitablerow-hover:hover': {
                backgroundcolor: 'blue',
            },
        },
    },
},

use this is you want to override the component at the theme level vs styled overrides, sx or usestyles.

score:2

this is a trivial task in mui v5. see the docs here:

<table
  sx={{
    "& .muitablerow-root:hover": {
      backgroundcolor: "primary.light"
    }
  }}
>

live demo

codesandbox demo

score:4

you can maintain dependency on the material ui hover prop by using

hover: {
  '&:hover': {
    backgroundcolor: 'green !important',
  },
},

score:4

just put hover in the tablerow, but not the header tablerow

 <styledtablerow hover key={row.name}>

@material-ui/core/tablerow has built in code to deal with hover, it worked for me.

score:4

the implementation of the tablerow component and the customizing components page show that you need to override two classes, root.hover:hover and .hover to change the hover color.

const usestyles = makestyles((theme) => ({
  /* styles applied to the root element. */
  root: {
    // default root styles
    color: 'inherit',
    display: 'table-row',
    verticalalign: 'middle',
    // we disable the focus ring for mouse, touch and keyboard users.
    outline: 0,

    '&$hover:hover': {
      // set hover color
      backgroundcolor: theme.palette.action.hover,
    },
  },

  /* pseudo-class applied to the root element if `hover={true}`. */
  hover: {},
}));

then in your component, you can apply the styles to the classes prop.

const helloworld = () => {
  const classes = usestyles();
  return (
    <tablerow classes={classes}><tablecell></tablecell></tablerow>
  );
};

score:5

tablerow: {
    hover: {
        "&$hover:hover": {
            backgroundcolor: '#49bb7b',
        },
    },
}

<tablerow classname={classes.tablerow} key={n.id} hover onclick={event => this.handleclick(event)}>text</tablerow>

score:9

i've got this solution so far. maybe there are other approaches to override css of tablerow but this one works like a charm:

const styles = theme => ({
tablerow: {
    "&:hover": {
      backgroundcolor: "blue !important"
    }
  }
});


<tablerow hover
      key={lead.id} classname={classes.tablerow}

      onclick={() => {}}>

feel free to ask any question.


Related Query

More Query from same tag