material-ui - 将图标放在圆圈内

Question

我在做一个项目，但是这个项目有一个验证邮件页面，我想在这个界面的开头放一个邮件图标，但是绕了一圈又不行？如何在圆圈周围放置图标？

标签： material-uireact-typescript

Answer 1

使用图标头像。文档在这里。

这是一个有效的 CodeSandbox。

例子：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import EmailIcon from '@material-ui/icons/Email';

const useStyles = makeStyles((theme) => ({
  avatar: {
    backgroundColor: theme.palette.grey[50],
    border: `1px solid ${theme.palette.info.main}`,
    color: theme.palette.info.main,
  },
}));

export default function EmailAvatar() {
  const classes = useStyles();
  return (
    <Avatar className={classes.avatar}>
      <EmailIcon />
    </Avatar>
  );
}