Question

当我将光标悬停在@material-ui/core/IconButton上的

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

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

但是，当我创建新的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;

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的{{1}}中的button设置为index.css，并且也修复了该错误。

Answer 1

我不知道为什么上述两种解决方案对我不起作用。因此，我将 margin 和 width 添加到父元素，将 padding-right 添加到 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 2

问题是您的index.css中的const editListingBtn = document.querySelector('.editItem'); if (editListingBtn) { editListingBtn.addEventListener('click', e => { const csrf = editListingBtn.previousElementSibling.value; CSS。它将所有按钮的宽度设置为100px。 button是通过图标周围的按钮标签实现的。

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

一种解决方法是更改button中的以下内容：

index.css

成为CSS类，而不是定位所有按钮：

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

，然后更改要渲染的.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">。

Answer 3

这对我有用

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

Answer 4

这是我为去除椭圆形状所做的：

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

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

当鼠标悬停在material-ui图标按钮上时，它将带有椭圆形背景突出显示

4 个答案: