在圆圈内放置一个图标

Question

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

Answer 1

如果是按钮 - 将图标组件放入 IconButton 并为其应用边框。

emailIconButton: {
  border: "solid 2px", // Color will be detected from IconButton color prop
}

如果没有，只需用 div 包裹它并为其应用简单的边框样式。

JSS 示例：

emailIconWrapper: {
  padding: theme.spacing(1.5),
  borderRadius: "50%",
  borderStyle: "solid",
  borderWidth: "2px",
  borderColor: theme.palette.primary.main,
}

CSS 示例：

.email-icon-wrapper {
  padding: 12px;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: lightblue;
}

Answer 2

使用图标头像。 Documentation here.

Here's a working 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>
  );
}

在圆圈内放置一个图标

Put an icon inside a circle

material-ui

react-typescript