导入Material UI Avatar后React应用显示空白屏问题及替代方案咨询

问题说明 #

我的React应用编译正常，但导入并使用@material-ui/core的Avatar组件后页面显示空白屏。添加Avatar相关代码前应用运行完全正常，之前因为Material UI图标无法显示已经改用了react-icons，现在想找能替代Avatar的组件包。

原代码：

import React from 'react';
import { MdOutlineMenu } from 'react-icons/md';
import { FiSearch } from 'react-icons/fi';
import { MdVideoCall } from 'react-icons/md';
import { GrApps } from 'react-icons/gr';
import { IoIosNotifications } from 'react-icons/io';
import Avatar from '@material-ui/core/Avatar';

function header() {
  return (
    <div className='header'>
        <h1>I am a header</h1>
        <MdOutlineMenu />
        <img className='header__logo' 
        src="https://imgs.search.brave.com/0Adz0eT0KyLAofHJ_wU_1-GqmHa0rnORMw9GWm__p0Q/rs:fit:844:225:1/g:ce/aHR0cHM6Ly90c2U0/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5f/SWZFYVVzc2paUXda/MXU5MmIxX0dnSGFF/SyZwaWQ9QXBp" alt="" />
        <input type="text" />
        <FiSearch />
        <MdVideoCall />
        <GrApps />
        <IoIosNotifications />
        <Avatar alt="Remy Sharp" src="https://avatars2.githubusercontent.com/u/24712956?s=400&u=b71527e605ae1b748fc2d4157a842e57e427ad44&v=4"/>
    </div>
  );
}

export default header; 

推荐替代方案 #

1. Ant Design Avatar组件 #

• 安装命令：npm install antd 或 yarn add antd
• 修改后代码：

import React from 'react';
import { MdOutlineMenu } from 'react-icons/md';
import { FiSearch } from 'react-icons/fi';
import { MdVideoCall } from 'react-icons/md';
import { GrApps } from 'react-icons/gr';
import { IoIosNotifications } from 'react-icons/io';
import { Avatar } from 'antd';

function Header() {
  return (
    <div className='header'>
        <h1>I am a header</h1>
        <MdOutlineMenu />
        <img className='header__logo' 
        src="https://imgs.search.brave.com/0Adz0eT0KyLAofHJ_wU_1-GqmHa0rnORMw9GWm__p0Q/rs:fit:844:225:1/g:ce/aHR0cHM6Ly90c2U0/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5f/SWZFYVVzc2paUXda/MXU5MmIxX0dnSGFF/SyZwaWQ9QXBp" alt="" />
        <input type="text" />
        <FiSearch />
        <MdVideoCall />
        <GrApps />
        <IoIosNotifications />
        <Avatar alt="Remy Sharp" src="https://avatars2.githubusercontent.com/u/24712956?s=400&u=b71527e605ae1b748fc2d4157a842e57e427ad44&v=4"/>
    </div>
  );
}

export default Header; 

• 说明：支持图片、图标、文字等多种展示形式，风格统一，和react-icons搭配无冲突，文档完善。

2. Chakra UI Avatar组件 #

• 安装命令：npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
• 修改后代码：

import React from 'react';
import { MdOutlineMenu } from 'react-icons/md';
import { FiSearch } from 'react-icons/fi';
import { MdVideoCall } from 'react-icons/md';
import { GrApps } from 'react-icons/gr';
import { IoIosNotifications } from 'react-icons/io';
import { Avatar } from '@chakra-ui/react';

function Header() {
  return (
    <div className='header'>
        <h1>I am a header</h1>
        <MdOutlineMenu />
        <img className='header__logo' 
        src="https://imgs.search.brave.com/0Adz0eT0KyLAofHJ_wU_1-GqmHa0rnORMw9GWm__p0Q/rs:fit:844:225:1/g:ce/aHR0cHM6Ly90c2U0/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5f/SWZFYVVzc2paUXda/MXU5MmIxX0dnSGFF/SyZwaWQ9QXBp" alt="" />
        <input type="text" />
        <FiSearch />
        <MdVideoCall />
        <GrApps />
        <IoIosNotifications />
        <Avatar name="Remy Sharp" src="https://avatars2.githubusercontent.com/u/24712956?s=400&u=b71527e605ae1b748fc2d4157a842e57e427ad44&v=4" />
    </div>
  );
}

export default Header; 

• 说明：轻量级组件库，支持自定义样式，API简洁，和react-icons兼容良好。

3. 自定义Avatar组件 #

无需额外依赖，自己实现简单的圆形头像：

import React from 'react';
import { MdOutlineMenu } from 'react-icons/md';
import { FiSearch } from 'react-icons/fi';
import { MdVideoCall } from 'react-icons/md';
import { GrApps } from 'react-icons/gr';
import { IoIosNotifications } from 'react-icons/io';

function CustomAvatar({ alt, src }) {
  return (
    <img 
      src={src} 
      alt={alt} 
      style={{
        width: '40px',
        height: '40px',
        borderRadius: '50%',
        objectFit: 'cover',
        border: '1px solid #eee'
      }}
    />
  );
}

function Header() {
  return (
    <div className='header'>
        <h1>I am a header</h1>
        <MdOutlineMenu />
        <img className='header__logo' 
        src="https://imgs.search.brave.com/0Adz0eT0KyLAofHJ_wU_1-GqmHa0rnORMw9GWm__p0Q/rs:fit:844:225:1/g:ce/aHR0cHM6Ly90c2U0/Lm1tLmJpbmcubmV0/L3RoP2lkPU9JUC5f/SWZFYVVzc2paUXda/MXU5MmIxX0dnSGFF/SyZwaWQ9QXBp" alt="" />
        <input type="text" />
        <FiSearch />
        <MdVideoCall />
        <GrApps />
        <IoIosNotifications />
        <CustomAvatar alt="Remy Sharp" src="https://avatars2.githubusercontent.com/u/24712956?s=400&u=b71527e605ae1b748fc2d4157a842e57e427ad44&v=4"/>
    </div>
  );
}

export default Header; 

• 说明：完全自定义样式，适合需求简单的场景，可根据UI需求调整尺寸、边框等样式。

注意：原代码中组件名header改为首字母大写的Header，这是React组件的规范，能避免潜在的渲染问题。

内容的提问来源于stack exchange，提问作者Joseph Olutide