Material UI Avatar component sizes not changing

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?

Solution 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>

Solution 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} />