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.

Ultramontane

Right click->Inspect element, first guess would be the dimensions of the button aren't congruent.Hard to tell though with no example to reproduce it... – Neomaneomah

Please show the code/CSS of the elements around the IconButton. Something is affecting the width of the button. As Chris indicated, inspecting the element in browser Dev Tools is likely to show what CSS is affecting it. – Unsteady

@RyanCogswell, I've updated the post, take a look – Ultramontane

@ChrisW., , I've updated the post, take a look – Ultramontane

@Ultramontane So remove code from your app until you find the simplest possible version of your app that still shows the problem. – Unsteady

@RyanCogswell, I placed the simplest possible version of the code first, just the icon button. When community asked me to put the surrounding code – Ultramontane

@RyanCogswell, I have updated the post to reproduce the problem with minimum possible info. Please take a look – Ultramontane

Please show the contents of App.css and root. – Unsteady

Or remove the import of root if it reproduces without it. Go through the same process with App.css — remove as much of its contents as possible while still reproducing the problem. I suspect you will have answered your own question by the time you trim App.css down and see what in there causes this. – Unsteady

@Ultramontane I suspect the css that matters will involve button elements in some manner. – Unsteady

@RyanCogswell, I have tried emptying the App.css but the problem remains. I have posted the conttents of App.css. – Ultramontane

@Ultramontane Since you are exporting App, I assume you also have a separate index.js in play. Please show what is in it. – Unsteady

@RyanCogswell, I've added code of index.js and index.css – Ultramontane

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>.

Unsteady

Thanks for describing the problem, but I'm newbie in react and css, so can you give the solution or at least guide me through. – Ultramontane

I have set the width to auto and it works, can you please add it to your post so I can accept your answer – Ultramontane

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.

Fricassee

Nice! It worked for me too! – Renfred

But, the ripple effect is still in circle shape, any ideas to make it rectangular as well? – Sandal

Answer 3

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>

Nikolos

You are a life saver. This should be the accepted answer for truly making IconButtons square, ripple included. – Dziggetai

Answer 4

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

Vonnievonny

Answer 5

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

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

Villenage

Answer 6

This worked for me

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

Viewpoint

Answer 7

<IconButton sx={{ borderRadius: 0 }}>
   <WorkIcon />
</IconButton>

Troche

Please explain the code block. – Formless

Answer 8

This worked for me

<IconButton sx={{height:"32px",width:"32px", backgroundColor: '#FECDD2', borderRadius: 0}}>
   <LockIcon style={{ color: '#C62828' }} />
</IconButton>

Titicaca

The various answers have a sub-node of DeleteIcon, WorkIcon or LockIcon. Is there a specific reason why chose the latter? – Halfcaste

I shared a snippet of what worked within my use case, making use of the LockIcon – Titicaca