Css 当光标悬停在材质ui图标按钮上时，该按钮将以椭圆形背景高亮显示

当我将光标悬停在

@material ui/core/IconButton

中的IconButton上时，它显示了一个奇怪的椭圆形背景

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

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

我是个新手，不知道发生了什么，我使用的图标按钮没有任何明确的样式

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;

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

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的
按钮中的
宽度设置为
自动
，它也修复了错误。
问题是index.css中的
按钮
css。它将所有按钮的宽度设置为100px<代码>图标按钮
通过图标周围的按钮标签实现

修复
IconButton
的外观很容易——只需删除
按钮
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 className="standard-button">



我不知道为什么上述两种解决方案对我不起作用，而只是
。因此，我在
App.css
中向父元素添加了
margin
和
width
，并向子元素添加了
padding right

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

右键单击->检查元素，第一个猜测可能是按钮的尺寸不一致。很难判断，但没有示例重现它…请在
图标按钮周围显示元素的代码/CSS
。有什么东西影响了按钮的宽度。正如Chris指出的，在浏览器开发工具中检查元素可能会显示CSS对它的影响。@RyanCogswell，我已经更新了帖子，请看一看look@ChrisW.，我更新了帖子，坐look@dev因此，请从应用程序中删除代码，直到找到仍然显示问题的应用程序的最简单版本。感谢您描述此问题，但我是react和css方面的新手，因此您可以给出解决方案或至少指导我。我已将
宽度设置为
自动
，并且它可以工作，你能把它添加到你的帖子里吗？这样我就可以接受你的答案了