reactjs 当光标悬停在material-ui图标按钮上时,该按钮将以椭圆形背景突出显示

yrdbyhpb  于 2023-03-12  发布在  React
关注(0)|答案(7)|浏览(154)

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

我想这是我的一个错误,所以我只是从材料ui网站复制代码,但问题仍然存在。
然而,当我创建了新的react项目,并在其中创建了一个图标按钮,背景是通常的圆圈。

我是新的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;
}

这个问题在我使用图标按钮的整个项目中都存在,不仅仅是这个文件。当我在一个新项目中使用这个文件时,它按预期工作:无椭圆背景。
编辑:

接受的答案效果很好。在我的另一个例子中,我尝试将index.cssbutton中的width设置为auto,它也修复了错误。

cetgtptt

cetgtptt1#

下面是我删除椭圆形状所做的操作:

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

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

cig3rfwq

cig3rfwq2#

我不知道为什么上面两种方法对我都不起作用,所以我在App.css的父元素中添加了marginwidth,在子元素中添加了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;
    }
k97glaaz

k97glaaz3#

问题是index.css中的button CSS,它将所有按钮的宽度设置为100 px。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>

yiytaume

yiytaume4#

这对我很有效

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

omjgkv6w5#

你好,你可以覆盖涟漪根和子样式,以改变边界半径或背景颜色。

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>

或MUI5,带sx prop

<IconButton
  sx={{
    borderRadius: 0,
    '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
      borderRadius: 0,
      backgroundColor: 'red',
    },
  }}
>
  <WorkIcon />
</IconButton>
ruyhziif

ruyhziif6#

使用相同值的高度和宽度来在悬停时显示圆形阴影-

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

ivqmmu1c7#

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

相关问题