Значок кнопки Material-UI подсвечивается эллиптическим фоном, когда на него наведен курсор

Question

IconButton в @material-ui/core/IconButton показывает странный эллиптический фон, когда я наводю курсор на него.

Мне показалось, что это ошибка, поэтому я просто скопировал код с веб-сайта material-ui, но проблема остается.

Однако, когда я создал новый проект реагирования и создал в нем кнопку с пиктограммой, фон был обычным кругом.

I 'Я новичок, чтобы реагировать и не могу понять, что происходит, я использую значок кнопки без каких-либо явных стилей,

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

Эта проблема сохраняется во всем моем проекте везде, где я использую кнопки значков, а не только столько этот файл.И когда я использую этот же файл в новом проекте, он работает должным образом: нет эллиптических фонов.

РЕДАКТИРОВАТЬ:
Принятый ответ работает хорошо.В моем случае я также попытался установить width в button из index.css в auto, и это тоже исправило ошибку.

Answer 1

Проблема заключается в button CSS в вашем index.css.Он устанавливает ширину всех кнопок на 100 пикселей.IconButton реализуется с помощью тега кнопки вокруг значка.

Исправить внешний вид IconButton легко - просто удалите этот button CSS.Более утомительным является то, что вы, вероятно, хотите, чтобы стиль кнопок был для всех остальных кнопок.

Один из способов справиться с этим - изменить следующее в 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;
}

накласс CSS, а не нацеливание на все кнопки:

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

, а затем измените места, в которых вы отображаете button используемых элементов:

<button className="standard-button">

вместо просто <button>.