In my React.js project, I encountered an issue where the class for the img tag is appearing as undefined. The problem lies within the Header.jsx component. In this file, I am using the <img> tag but the CSS properties are not being applied to the image. As a result, I am seeing an error stating class=undefined.
import React from 'react';
import classes from './header.css';
import { Box, Grid, Typography } from '@mui/material';
const Header = () => {
return (
<>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={3}>
<Grid item xs>
<img src='./images/logo.svg' className={`${classes.header__logo}`} alt='Logo'/>
</Grid>
<Grid item xs={6}>
<Typography>gbr</Typography>
</Grid>
<Grid item xs>
<Typography>gbr</Typography>
</Grid>
</Grid>
</Box>
</>
)
}
export default Header
The following snippet shows the CSS file used for styling the header:
/* header.css */
.header__logo{
height: 20px;
width: 50px;
}
Upon checking the console, the error message class="undefined" is displayed.
<img src="./images/logo.svg" class="undefined" alt="Logo">