CODEWITHSUNDEEP
reactjsmaterial-ui
Missak Boyajian
Missak Boyajian

Reputation: 2245

Material UI Avatar component sizes not changing

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?

Upvotes: 11

Views: 29189

Answers (4)

Prince
Prince

Reputation: 31

You can try setting additional Avatar Props

<AvatarGroup
 componentsProps={{
       additionalAvatar: {
                 sx: {
                           height: 30,
                             width: 30,
                             background: "red"
                         }
                   }
                  }
               }
         max={2}>
 ....
</AvatarGroup>

Upvotes: 0

PeterPazmandi
PeterPazmandi

Reputation: 581

Unfortunately none of the answers worked me. The only solutions which solved the problem is to use !important

I was using the Avatar in a menu.

<Avatar
    variant='circular'
    alt={currentUser.firstName}
    src={currentUser.photoUrl}
    sx={{
        width: '80px !important', height: '80px !important'
}} />

Upvotes: 0

Steve
Steve

Reputation: 4975

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>

Upvotes: 17

Dako Junior
Dako Junior

Reputation: 757

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

Upvotes: 4

Related Questions