material-ui icon button highlights with an elliptical background when cursor is hovered over it

Question

IconButton in @material-ui/core/IconButton is showing a weird elliptical background when I hover the cursor over it.

I thought it is a mistake by me, so I just copied the code from material-ui website, but the problem remains.

However, when I created new react project, and created an icon button in it, the background was the usual circle.

I'm new to react and can't figure out what is going on, I'm using icon button without any explicit styling,

App.js

import React, { Component } from 'react';
import './App.css';
import { IconButton } from '@material-ui/core';
import WorkIcon from '@material-ui/icons/Work';
import CssBaseline from '@material-ui/core/CssBaseline';

class App extends Component {

    render() {
        return (
            <div>
                <CssBaseline />
                <IconButton>
                    <WorkIcon />
                </IconButton>
            </div>
        );
    }
}

export default App;

App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.MuiCardContent-root-29 {
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 500px;
    height: 300px;
    margin: auto;
    background-color: #f3f3f3;
}

.login {
    margin-top: 50px;
    margin-left: 50px;
}

.form-group {
    margin-bottom: 35px;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from "react-redux";

import './index.css';
import App from './App';
import store from "./store/index";
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));
registerServiceWorker();

index.css

body {
    background-color : #484848;
    margin: 0;
    padding: 0;
}
h1 {
    color : #000000;
    text-align : center;
    font-family: "SIMPSON";
}
form {
    width: 300px;
    margin: 50px auto;
}


button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    width: 100px;
}

.tableHeader {
    background-color: green !important;
}

.header {
    color: green;
    font-weight: bold;
}

.edit {
    height: 30px;
    cursor: pointer;
}

.delete {
    height: 20px;
    cursor: pointer;
    padding-left: 10px;
}

This problem persists in my whole project wherever I use icon buttons, and not just with this file only. And when I use this same file in a new project it works as expected: No elliptical backgrounds.

EDIT:
The accepted answer works well. In my also case I tried setting the width in button of index.css to auto and it fixed the error too.

Answer 1

The problem is the button CSS in your index.css. It is setting the width of all buttons to 100px. IconButton is implemented via a button tag around the icon.

Fixing the look of IconButton is easy -- just remove that button CSS. The more tedious part is that presumably you want that button styling on all your other buttons.

One way to handle this is to change the following in index.css:

button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    width: 100px;
}

to be a CSS class rather than targeting all buttons:

.standard-button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    width: 100px;
}

and then change places where you are rendering button elements to use:

<button className="standard-button">

instead of just <button>.

Answer 2

This is what I did to remove the elliptical shape:

<IconButton style={{borderRadius: 0}}>
     <DeleteIcon/>
</IconButton>

Now, it will be a rectangular shape when hovered.

Answer 3

I don't know why the above two solutions didn't work for me. So I added margin and width to the parent element and padding-right to the child element in App.css.

//For the buttons on top

    button.MuiButtonBase-root {
      margin: 10px;
      width: 50px;
    }
    
    button.MuiButtonBase-root span span {
      padding-right: 50px;
    }
    
//For the checkboxes

    span.MuiButtonBase-root {
      margin-left: 10px;
      width: 45px;
    }
    
    span.MuiButtonBase-root span {
      padding-right: 10px;
    }

Answer 4

This worked for me

<IconButton style={{height:"45px",marginTop:"20px"}}>
    <DeleteIcon/>
</IconButton>

Answer 5

use height and width with same value to have circular shade on hover-

<IconButton sx={{height:"40px",width:"40px"}}>
   <WorkIcon />
</IconButton>

Answer 6

Hi you can override ripple root and child style to change border radius or background color.

const useStyles = makeStyles({
  root: {
    borderRadius: 0, // <---- icon button root style
    '.MuiTouchRipple-ripple .MuiTouchRipple-child': {  // <----this should change ripple style when clicked or touched
      borderRadius: 0,
      backgroundColor: 'red'
    },
  },
});
<IconButton className={classes.rippleRoot}>
  <WorkIcon />
</IconButton>

OR MUI5 with sx props

<IconButton
  sx={{
    borderRadius: 0,
    '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
      borderRadius: 0,
      backgroundColor: 'red',
    },
  }}
>
  <WorkIcon />
</IconButton>