当我将光标悬停在@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.css
的button
中的width
设置为auto
,它也修复了错误。
7条答案
按热度按时间cetgtptt1#
下面是我删除椭圆形状所做的操作:
现在,它将是一个矩形形状时,悬停。
cig3rfwq2#
我不知道为什么上面两种方法对我都不起作用,所以我在
App.css
的父元素中添加了margin
和width
,在子元素中添加了padding-right
。k97glaaz3#
问题是index.css中的
button
CSS,它将所有按钮的宽度设置为100 px。IconButton
是通过图标周围的按钮标签实现的。修复
IconButton
的外观很容易--只需要删除button
CSS。更繁琐的部分是,可能您希望所有其他按钮都具有该按钮样式。处理此问题的一种方法是在
index.css
中更改以下内容:作为CSS类,而不是针对所有按钮:
然后更改渲染
button
元素的位置以用途:而不仅仅是
<button>
。yiytaume4#
这对我很有效
omjgkv6w5#
你好,你可以覆盖涟漪根和子样式,以改变边界半径或背景颜色。
或MUI5,带sx prop
ruyhziif6#
使用相同值的高度和宽度来在悬停时显示圆形阴影-
ivqmmu1c7#