Question

我有这个组成部分

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;

我正在尝试设置sizes属性，但是它没有改变。它究竟具有什么价值？

Answer 1

向下滚动到img的sizes属性并进行读取。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

或仅使用文档中所示的makeStyles：

https://material-ui.com/components/avatars/#SizeAvatars.js

或者另一个选择是简单的内联样式：

<Avatar style={{ height: '70px', width: '70px' }}></Avatar>

Answer 2

您可以使用类名和 Material UI 中的 theme.spacing 设置大小。

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

材质UI Avatar组件大小不变

2 个答案: