我尝试使用材质 ui 创建一个自定义样式的按钮,以便在我的项目的其他文件中重用。不知何故,按钮不适应我定义的样式。有人可以告诉我我在哪里犯了错误/忘记了什么吗?
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
const styles = themes => ({
root: {
margin: "50px",
padding: "20px",
display: 'block'
},
button: {
marginTop: '20px',
padding: '100px',
height: "300px+15vh",
width: "300px+15vw",
borderRadius: "20% 20%",
color: '#FFFFFF',
backgroundColor: '#05164D',
'&:hover': {
backgroundColor: "rgba(5, 22, 77, 0.75)",
boxShadow: '0 3px 5px 2px rgba(153, 153, 153, .8)'
},
},
});
const styledButton = props => {
const { classes } = props;
return (
<div>
<IconButton className={classes.button} {...props} aria-label="Gift" disableTouchRipple="true">
{props.children}
</IconButton>
</div>
)
}
export default withStyles(styles)(styledButton);