Question

一般问题

Material-UI <Avatar/>中元素的宽度和高度如何设置？

具体示例

具体而言，我遇到的挑战是<AccountCircle/> example: account circle没有填补父母。

我试图得到一个80x80的化身，但因为material-ui添加了很多随机类和随机边距和填充，我最终得到了别的东西。生成的实际代码生成<svg>，内部<path>，其大小约为66.67px

const avatarImageStyle = {
    width: 80,
    height: 80,
};

<AccountCircle style={Object.assign({}, avatarImageStyle, {color: 'grey' })} />

Answer 1

我目前正在处理的应用程序遇到相同的问题。我通过增加fontSize中的Avatar来解决它，然后将图标设置为使用其父级的字体大小。

我们不必指定图标的宽度和高度，因为Material-UI图标（大概是一般的图标）的形状是对称的。但是，我们必须指定Avatar的尺寸，否则它将保持与以前相同的尺寸，而其中的图标尺寸将变大（并且图标将被裁剪）。由于我使用fontSize来增加头像的内容大小，因此使用auto作为其尺寸将有效。

因此，对于头像的样式，请使用：

{
    fontSize: '80px',
    width: 'auto',
    height: 'auto',
    ...
}

并添加图标，请使用：

<AccountCircle style={Object.assign({color: 'grey' })} fontSize='inherit' />