卡片大小的材质 UI 头像不变答案

【问题标题】：Material UI Avatar in card size not changing卡片大小的材质 UI 头像不变
【发布时间】：2020-09-29 18:13:00
【问题描述】：

希望您能帮助我尝试更改我的卡片组件中的头像大小，但这不起作用。

<Avatar
          

    alt="Remy Sharp"
              src="https://material-ui.com/static/images/avatar/1.jpg"
              className={classes.large}
            />

我猜是因为它在卡片组件中？我什至检查了将其添加到带有卡片形式 MUI 的代码沙箱中，但它在那里也不起作用。

谢谢

【问题讨论】：

能否请您提供您的卡片组件代码？

标签： reactjs material-ui

【解决方案1】：

尝试以下任一方法。

选项 1

<Avatar
  alt="Remy Sharp"
  height={24}
  src="https://material-ui.com/static/images/avatar/1.jpg"
  width={24}
/>

选项 2

<Avatar
  alt="Remy Sharp"
  classes={{ root: classes.large }}
  src="https://material-ui.com/static/images/avatar/1.jpg"
/>

选项 3

const classes = useStyles(() => {
  return {
    large: {
      height: `24px !important`, // whatever height
      width: `24px !important`, // whatever height
    }, 
  };
});

<Avatar
  alt="Remy Sharp"
  className={classes.large}
  src="https://material-ui.com/static/images/avatar/1.jpg"
/>

选项 4

const classes = useStyles(() => {
  return {
    card: {
      '& avatar': {
        height: 24, // whatever height
        width: 24, // whatever height
       },
    }, 
  };
});

  <Card className={classes.card}>
    <Avatar
      alt="Remy Sharp"
      className='avatar'
      src="https://material-ui.com/static/images/avatar/1.jpg"
    />
  </Card>

【讨论】：