Я попытался создать пользовательскую кнопку с пользовательским интерфейсом для повторного использования в других файлах моего проекта.Почему-то кнопка не адаптирует стиль, который я определил.Может кто-нибудь сказать мне, где я ошибся / что-то забыл?
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);