Material UI Avatar component sizes not changing - reactjs

Question

I have this component
import React, { FC } from "react";
import { Avatar } from "#material-ui/core";
export interface AvatarProps {
alt?: string;
src: string;
variant?: "circle" | "rounded" | "square";
sizes?: string;
}
const Component: FC<AvatarProps> = (props: AvatarProps): JSX.Element => {
return <Avatar {...props}></Avatar>;
};
export default Component;
I am trying to set the sizes property but it is not changing. What exactly does it take value?

Answer 1

MUI 5
Using the sx prop provided by the library:
<Avatar sx={{ height: '70px', width: '70px' }}></Avatar>
...or my preferred method, create a styled component outside your functional component or class. Something like this:
const StyledAvatar = ({ children, ...props }) => (
<Avatar sx={{ height: '70px', width: '70px' }} {...props}>
{children}
</Avatar>
);
Usage:
<StyledAvatar alt="add other props as normal">
Children can be nested here
</StyledAvatar>;
Material UI 4 (Original Answer)
Scroll down to the sizes attribute of img and have a read.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
Or just use makeStyles as seen in the documentation:
https://v4.mui.com/components/avatars/#SizeAvatars.js
Or another option is a simple inline style:
<Avatar style={{ height: '70px', width: '70px' }}></Avatar>

Answer 2

You can set the size with a classname and the theme.spacing from Material UI.
const useStyles = makeStyles((theme) => ({
sizeAvatar: {
height: theme.spacing(4),
width: theme.spacing(4),
},
}));
...
const classes = useStyles();
<Avatar src="/path/to/image" alt="Avatar" className={classes.sizeAvatar} />

Answer 3

You can try setting additional Avatar Props
<AvatarGroup
componentsProps={{
additionalAvatar: {
sx: {
height: 30,
width: 30,
background: "red"
}
}
}
}
max={2}>
....
Formatted by https://st.elmah.io