React JS项目中Header组件标题无法正常显示问题求助

你的Header组件中文本无法显示的核心问题是Typography组件的写法错误——你将其写成了自闭合标签，导致文本不在组件内部，无法被React渲染。同时还存在组件名称大小写错误的问题，以下是具体修复方案：

错误点梳理 #

• <Typography variant='h4' className={classes.title}/> 是自闭合标签，后续的"Travel Advisor"未被组件包裹，不会被渲染
• <Typography variant='h6' className={classes.title}/> 同理，"Explore new places"无法被正确渲染
• searchIcon 应为大写开头的SearchIcon（与导入的组件名称一致）
• 多余的空<Typography/>标签属于无效DOM元素，可移除

修复后的完整代码 #

import React from 'react';
import { Autocomplete } from '@react-google-maps/api';
import { AppBar,Toolbar,Typography,InputBase,Box } from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';

import useStyles from './styles'

const Header = () => {
    const classes = useStyles();

    return(
        <AppBar position='static'>
            <Toolbar className={classes.toolbar}>
                <Typography variant='h4' className={classes.title}>
                    Travel Advisor
                </Typography>
                <Box display='flex'>
                    <Typography variant='h6' className={classes.title}>
                        Explore new places
                    </Typography>
                    {/*<Autocomplete>*/}
                        <div className={classes.search}>
                            <div className={classes.searchIcon}>
                                <SearchIcon />
                            </div>
                            <InputBase placeholder='Search...' classes={{root: classes.inputRoot, input: classes.inputInput}} />
                        </div>
                    {/*</Autocomplete>*/}
                </Box>  
            </Toolbar>
        </AppBar>
    );
}

export default Header;

修复说明 #

1. 将所有自闭合的Typography组件改为成对标签，把文本内容放在<Typography>和</Typography>之间
2. 修正searchIcon为SearchIcon，确保导入的组件能正确渲染
3. 移除无效的空Typography标签，精简DOM结构

内容的提问来源于stack exchange，提问作者a-govil