CODEWITHSUNDEEP
reactjsstyles
Tim
Tim

Reputation: 2411

MaterialUI Custom Hover Style

I'm a newbie here to React and I'm a little bit confused on how to override classes in Material UI. I took a look at the examples and tried to mimic it but it didn't seem to do what I want it to do.

Basically, on a table row hover, I want to make it set a background color different from what it is currently doing.

Here is my approach:

const styles = theme => ({
  root: {
    width: "100%",
    marginTop: theme.spacing.unit * 3
  },
  table: {
    minWidth: 1020
  },
  tableWrapper: {
    overflowX: "auto"
  },
  hover: {
    "&:hover": {
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    }
  }
});

return <TableRow hover classes={{hover: classes.hover}} role="checkbox" aria-checked={isSelected} tabIndex={-1} key={n.row_id} selected={isSelected}>
     {this.insertRow(n, isSelected, counter, checkbox)}

;

export default withStyles(styles)(EnhancedTable);

Thanks for your help!

Upvotes: 118

Views: 274604

Answers (6)

user-usman
user-usman

Reputation: 11

<Button
        variant="contained"
        sx={{
          bgcolor: "yellow",
          "&:hover": {
            bgcolor: "green",
          },
        }}
      >
        Demo
      </Button>

Upvotes: 0

Mohammad Fallah
Mohammad Fallah

Reputation: 1110

For example, I change the SVG icon color when it hovered:

     <IconButton>
        <CiteIcon
          sx={{
            '&:hover': {
              '& > path,use': {
                fill: '#f00',
              },
            },
          }}
        />
      </IconButton>

Upvotes: 0

Nandan Swamy K
Nandan Swamy K

Reputation: 31

Here is my approach

const checkBoxStyles = () => ({
  root: {
    '&$checked': {
      color: '#4885FB'
    },
    '&$disabled': {
      color: '#96C9FF'
    },
    '&:hover': {
      backgroundColor: '#E4F2FF !important'
    }
  },
  checked: {},
  disabled: {
    color: '#96C9FF'
  }
});

const CustomCheckbox = withStyles(checkBoxStyles)(Checkbox);

Just note: If you don't specify !important. When the checkbox is 'checked', the on-hover background color get's over-ridden.

I am using material UI version 4

Upvotes: 2

Rana Muhammad Usama
Rana Muhammad Usama

Reputation: 312

By Adding A simple Statement you can customize Hover properties..

'&:hover': {
background: "rgb(7, 177, 77, 0.42)",    
             
}

So,

tableWrapper: {
    overflowX: "auto",
  
  hover: {
    "&:hover": {
      backgroundColor: 'rgb(7, 177, 77, 0.42)'
    },
}

Upvotes: 10

theshubhagrwl
theshubhagrwl

Reputation: 1026

If you are looking to make some custom hover animations then you can try this style
This block of code will change the colour of a card on hover.

For more info please check here Transitions in MUI

card : {
    transition: theme.transitions.create(["background", "background-color"], {
      duration: theme.transitions.duration.complex,
    }),
    "&:hover": {
      backgroundColor: "#333",
    },
}

Upvotes: 7

Saji
Saji

Reputation: 2836

You should define a key for TableRow as a className and then put your hover style right on that class name as an object.

const styles = theme => ({
  ...
  tr: {
    background: "#f1f1f1",
    '&:hover': {
       background: "#f00",
    },
  },
  ...
});

return <TableRow className={props.classes.tr} ...>

In another example it would be something like this:

const styles = {
  tr: {
    background: "#f1f1f1",
    '&:hover': {
      background: "#f00",
    }
  }
};

function Table(props) {
  return (
    <Table>
      <TableRow className={props.classes.tr}>
        {"table row"}
      </TableRow>
    </Table>
  );
}

export default withStyles(styles)(Table);

Upvotes: 231

Related Questions