Mui Button Hover Background Color and Text Color

const { 
  AppBar,
  Button,
  makeStyles,
  Toolbar,
  Typography,
} = MaterialUI

const useStyles = makeStyles({
  flexGrow: {
    flex: '1',
  },
  button: {
    backgroundColor: '#3c52b2',
    color: '#fff',
    '&:hover': {
      backgroundColor: '#fff',
      color: '#3c52b2',
  },
}})

function AppBarWithButtons() {
  const classes = useStyles()
  
  return (
    <AppBar>
      <Toolbar>
        <Typography>
          YourApp
        </Typography>
        <div className={classes.flexGrow} />
        <Button className={classes.button}>
          Button 1
        </Button>
        <Button className={classes.button}>
          Button 2
        </Button>
      </Toolbar>
    </AppBar>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <AppBarWithButtons />
  </React.StrictMode>,
  document.getElementById("root")
)

<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js"></script>

IconButton from MUI no longer changes hover color with makeStyles?

You should add !important to your style then it should work

const useStyles = makeStyles((theme) => ({
  customHoverFocus: {
    "&:hover, &.MuiIconButton": { background: "yellow !important" }
  }
}));

how to change the color of childs elements on card hover in material ui?

To change a style of a child when hovering over a parent using React Material UI styles, we can call makeStyles with the &:hover selector of the parent element to change the styles when we hover over the child element.

for example :- here outerdiv is perent element and addIcon is child element

import * as React from "react";
import { Grid, makeStyles } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";

const useStyles = makeStyles((theme) => ({
  outerDiv: {
    backgroundColor: theme.palette.grey[200],
    padding: theme.spacing(4),
    "&:hover": {
      cursor: "pointer",
      backgroundColor: theme.palette.grey[100],
      "& $addIcon": {
        color: "purple"
      }
    }
  },
  addIcon: () => ({
    height: 50,
    width: 50,
    color: theme.palette.grey[400],
    marginBottom: theme.spacing(2)
  })
}));

export default function App() {
  const classes = useStyles();

  return (
    <Grid container>
      <Grid item className={classes.outerDiv}>
        <AddIcon className={classes.addIcon} />
      </Grid>
    </Grid>
  );
}

MUI - Change Button text color in theme

Solved it! This finally did the trick:

const theme = createMuiTheme({
  palette: {
    primary: lightBlue,
  },
  overrides: {
    MuiButton: {
      raisedPrimary: {
        color: 'white',
      },
    },
  }
});

So, you just have to use "overrides" and be explicit about the exact type of component you want to change.

MaterialUI Custom Hover Style

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);

React MUI - Cannot Change FAB color on Hover

To override the color, you need to use makeStyles,
Here is the Codesandbox for that.

https://codesandbox.io/s/floatingactionbuttons-material-demo-forked-p8o85?file=/demo.js

I also attached the full code below.

import * as React from "react";
import Box from "@mui/material/Box";
import Fab from "@mui/material/Fab";
import AddIcon from "@mui/icons-material/Add";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  addButton: {
    margin: 0,
    top: "auto",
    right: 20,
    bottom: 20,
    left: "auto",
    position: "fixed",
    color: "primary",
    zIndex: 20,
    backgroundColor: "red",
    "&:hover": {
      backgroundColor: "yellow"
    }
  },
  addIcon: {
    fill: "white"
  }
});

export default function FloatingActionButtons() {
  const classes = useStyles();

  return (
    <Box sx={{ "& > :not(style)": { m: 1 } }}>
      <Fab aria-label="Next Level" className={classes.addButton}>
        <AddIcon className={classes.addIcon} />
      </Fab>
    </Box>
  );
}

---

Related Topics