当光标悬停在材质-ui 图标按钮上时，该按钮会以椭圆形背景突出显示

Question

@material-ui/core/IconButton当我将光标悬停在 IconButton 上时，它会显示一个奇怪的椭圆形背景。

我认为这是我的错误，所以我只是从material-ui网站复制了代码，但问题仍然存在。

然而，当我创建新的反应项目并在其中创建一个图标按钮时，背景是通常的圆圈。

我是新来反应的，无法弄清楚发生了什么，我使用的图标按钮没有任何明确的样式，

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

无论我使用图标按钮，这个问题都存在于我的整个项目中，而不仅仅是这个文件。当我在新项目中使用相同的文件时，它按预期工作：没有椭圆背景。

编辑：
接受的答案效果很好。在我的情况下，我尝试将widthin设置button为index.cssto auto，它也修复了错误。

Answer 1

这就是我删除椭圆形状的方法：

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

现在，悬停时它将是一个矩形。

Answer 2

问题出button在你的index.css 中的CSS。它将所有按钮的宽度设置为 100px。IconButton通过图标周围的按钮标签实现。

修复外观IconButton很容易——只需删除该buttonCSS 即可。更乏味的部分是，您可能希望在所有其他按钮上使用该按钮样式。

处理此问题的一种方法是更改​​以下内容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>.