We Keep Coding

Getting class as undefined for img tag in react.js

Getting class as undefined for img tag in react.js
This is the component Header.jsx,
Here is the Header.jsx I'm using <img>, but the CSS properties are not not being implemented in the image, and I'm getting error as 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
This is the css file for the header
/* header.css */
.header__logo{
height: 20px;
width: 50px;
}
In the console I'm getting this error, class="undefined"
<img src="./images/logo.svg" class="undefined" alt="Logo">

Just do like that:Basic Concept
import React from 'react';
import './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="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

When im doing this naming convention I make sure there's a parent tag with the classname you're trying to extend, in this case "header", also helps if your using SCSS with this, try something like this:
import React from 'react';
import classes from './header.scss';
import { Box,Grid, Typography} from '#mui/material';
const Header = () => {
return (
<div className={`${classes.header}`>
<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
Inside your './header.scss'
.header {
// css style for header class
&__logo {
// css style code for logo class
}
}
I find, it returns undefined because it wasn't properly placed in the correct spot within your style sheet. Your react code looks good just missing a few things.

In material ui version 5 Grid component not stretching

I am trying to stretch the Grid component when one of the Card component has extra text.
Please find the sample code here:
https://codesandbox.io/s/mediacard-demo-material-ui-forked-xpme4r?file=/demo.js:283-290
When i change the alignItems to "flex-end" or "center" it works.
But alignItems: "stretch" not working.
Using MUI Version5
Any suggestions would be helpful.

The Problem is Solved
I added the heights to the card and made it responsive
It Might be helpful to you
import React from "react";
import { Grid, Card } from "#mui/material";
import CardActions from "#mui/material/CardActions";
import CardContent from "#mui/material/CardContent";
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles((theme) => ({
stretch: {
height: "100%"
}
}));
export default function MediaCard() {
const classes = useStyles();
return (
<Grid container spacing={3} justify="space-between" alignItems="stretch">
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent>Card A</CardContent>
<CardActions>
Card A action // Card A actions // Card A actions //Card A actions// Card A actionsactions// Card A actionsactions// Card A actionsactions// Card A actions
</CardActions>
</Card>
</Grid>
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent> Card B content</CardContent>
<CardActions> Card B actions</CardActions>
</Card>
</Grid>
<Grid item xl={2} lg={2} md={6} xs={12}>
<Card className={classes.stretch}>
<CardContent>Card B content</CardContent>
<CardActions> Card B actions</CardActions>
</Card>
</Grid>
</Grid>
);
}

How do I make a one of my elements in react position without overlapping using Grid Component?

I have 3 components on my react page
PageHeader,SideMenu & FeatureList (which is made up of Display Cards) here are the components below:-
App.js
import './App.css';
import { Grid } from '#mui/material';
import SideMenu from './components/home/SideMenu';
import Features from './components/home/Features';
import PageHeader from './components/home/PageHeader';
function App() {
return (
<Grid container spacing={10}>
<Grid item xs={3}>
<PageHeader></PageHeader>
<SideMenu></SideMenu>
</Grid>
<Grid item xs={8}>
<Features></Features>
</Grid>
</Grid>
// <div>
// <PageHeader></PageHeader>
// <SideMenu></SideMenu>
// <Features></Features>
// </div>
);
}
export default App;
PageHeader.js
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import Button from '#mui/material/Button';
import IconButton from '#mui/material/IconButton';
import MenuIcon from '#mui/icons-material/Menu';
import { Grid } from '#mui/material';
var LOGGED_IN = false
const getButtons = (LOGGED_IN) => {
if (LOGGED_IN) {
return <Grid container>
<Grid item xs={7}></Grid>
<Grid item xs={2} >
<Button color="inherit">
<Typography variant="h6" component="div">
Profile
</Typography>
</Button>
</Grid>
<Grid item xs={2} >
<Button color="inherit">
<Typography variant="h6" component="div">
Logout
</Typography>
</Button>
</Grid>
</Grid>
}
else
return <Grid container>
<Grid item xs={9}></Grid>
<Grid item xs={2}>
<Button color="inherit">
<Typography variant="h6" component="div">
Login
</Typography>
</Button>
</Grid>
</Grid>
}
const drawerWidth = 240
export default function PageHeader(props) {
return (
<Grid item container>
<Grid container>
<AppBar
sx={{
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
}}
>
<Toolbar>
<Grid item xs={4}>
<Typography variant="h3" component="div">
Stonks!
</Typography>
</Grid>
{getButtons(LOGGED_IN)}
</Toolbar>
</AppBar>
</Grid>
</Grid>
);
}
SideMenu.js
import * as React from 'react';
import { Divider, Drawer, Grid, List, ListItem, ListItemIcon, ListItemText } from '#mui/material';
import { styled, useTheme } from '#mui/material/styles';
import BusinessIcon from '#mui/icons-material/Business';
import ShowChartIcon from '#mui/icons-material/ShowChart';
import AppsIcon from '#mui/icons-material/Apps';
import SupervisedUserCircleIcon from '#mui/icons-material/SupervisedUserCircle';
import InfoIcon from '#mui/icons-material/Info';
import CreateIcon from '#mui/icons-material/Create';
const DrawerHeader = styled('div')(({ theme }) => ({
...theme.mixins.toolbar,
}))
const drawerWidth = 240
export default function SideMenu(props) {
const theme = useTheme();
const [open, setOpen] = React.useState(true)
const handleDrawerOpen = () => {
setOpen(true)
}
const handleDrawerClose = () => {
setOpen(false)
}
return (
<Grid container spacing={2}>
<Grid item xs={12} container direction="column">
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
boxSizing: 'border-box',
'& .MuiDrawer-paper': {
width: drawerWidth,
boxSizing: 'border-box',
},
}}
variant="persistent"
anchor="left"
open={true}
>
<Grid item xs={0} container display='flex' alignItems='center' justifyContent='flex-end'>
<DrawerHeader display='flex'>
</DrawerHeader>
</Grid>
<Grid item xs={0}>
<Divider />
</Grid>
<Grid item container direction='column'>
<List>
{
['Companies', 'Exchanges', 'Sectors', 'Users'].map((text) => (
<Grid item xs={12}>
<ListItem button key={text}>
<ListItemIcon>
{(() => {
switch (text) {
case 'Companies':
return <BusinessIcon />
case 'Exchanges':
return <ShowChartIcon />
case 'Sectors':
return <AppsIcon />
case 'Users':
return <SupervisedUserCircleIcon />
}
})()}
{/* <MenuIcon /> */}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
</Grid>
))
}
</List>
</Grid>
<Grid item>
<Divider />
</Grid>
<Grid item container direction='column'>
<List>
{
['About', 'Creators'].map((text) => (
<Grid item xs={12}>
<ListItem button key={text}>
<ListItemIcon>
{(() => {
switch (text) {
case 'About':
return <InfoIcon />
case 'Creators':
return <CreateIcon />
}
})()}
{/* <MenuIcon /> */}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
</Grid>
))
}
</List>
</Grid>
</Drawer>
</Grid>
</Grid>
);
}
Features.js
import { Grid } from "#mui/material";
import React from "react";
import DisplayCard from "./DisplayCard";
import company from '../../static/company.jpg'
import stock_exchange from '../../static/stock_exchange.jpg'
import sector from '../../static/sector.png'
import user from '../../static/user.png'
export default function Features(props) {
return (
<Grid container spacing={3}>
<Grid item md={3}>
<DisplayCard name="Companies" brief="View All the Registerd Companies and Click on them to explore each of them in
detail" image={company}></DisplayCard>
</Grid>
<Grid item md={3}>
<DisplayCard name="Stock Exchanges" brief="View All the Registerd Stock Exchanges and Click on them to explore each of them in
detail" image={stock_exchange}></DisplayCard>
</Grid>
<Grid item md={3}>
<DisplayCard name="Sectors" brief="View All the Registerd Sectors and Click on them to explore each of them in
detail" image={sector}></DisplayCard>
</Grid>
<Grid item md={3}>
<DisplayCard name="Users" brief="View All the Registerd Users and Click on them to explore each of them in
detail" image={user}></DisplayCard>
</Grid>
</Grid>
)
}
DispalyCard.js
import React from "react";
import Card from '#mui/material/Card';
import CardContent from '#mui/material/CardContent';
import CardMedia from '#mui/material/CardMedia';
import Typography from '#mui/material/Typography';
import { Button, CardActionArea, CardActions, Grid } from '#mui/material';
export default function DisplayCard(props) {
return (
<Grid container spacing={2}>
<Card sx={{ border: "groove", maxWidth: 300, maxHeight: 400 }}>
<CardActionArea >
<Grid item xs={12}>
<CardMedia
component='img'
height='140'
image={props.image}
width='inherit'
/>
</Grid>
<Grid item container>
<CardContent>
<Grid item xs={12}>
<Typography gutterBottom variant='h4' component='div'>
{props.name}
</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant='body2' color='text.secondary'>
{props.brief}
</Typography>
</Grid>
</CardContent>
</Grid>
</CardActionArea>
<Grid>
<CardActions>
<Button size='small' color='primary'>
Click Here
</Button>
</CardActions>
</Grid>
</Card >
</Grid >
);
}
Currently my output is
As u can see the Feature Cards are getting overlapped by the Header
I want to make them not overlap but I have tried a lot of things but as I am a beginner in Grid & Flexbox im not able to make it correct
Any help will be appreciated.

It looks like you have your header set to position: fixed which removes it from the normal flow of the page. There may be a more elegant solution but so far the best solution for me has been adding the following to my CSS:
body {
padding-top: *height of header*;
}

MUI Cards are not rendering with style

I am importing the Card component from MUI but the component does not have any style.
import * as React from "react";
import Box from "#mui/material/Box";
import Card from "#mui/material/Card";
import CardActions from "#mui/material/CardActions";
import CardContent from "#mui/material/CardContent";
import Button from "#mui/material/Button";
import Typography from "#mui/material/Typography";
const bull = (
<Box
component="span"
sx={{ display: "inline-block", mx: "2px", transform: "scale(0.8)" }}
>
•
</Box>
);
export default function BasicCard() {
return (
<Card sx={{ minWidth: 275 }}>
<CardContent>
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
Word of the Day
</Typography>
<Typography variant="h5" component="div">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography sx={{ mb: 1.5 }} color="text.secondary">
adjective
</Typography>
<Typography variant="body2">
well meaning and kindly.
<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
);
}
What the component is supposed to look like:
MUI Component
What the component actually looks like:
Imported Component
How can I add styling?

You probably have text-align: center set somewhere in the parent. This usually happens when you create a react project with a template like CRA that has some CSS files like this:
.App {
text-align: center;
}
You can fix it by finding and removing that text-align property or reset it in your Card:
<Card sx={{ minWidth: 275, textAlign: "initial" }}>
If what you mean is the dark background, you can achieve it by setting the theme mode to dark:
import { ThemeProvider, createTheme } from "#mui/material/styles";
const theme = createTheme({
palette: {
mode: "dark"
}
});
<ThemeProvider theme={theme}>
<Card sx={{ minWidth: 275 }}>
{...}
</Card>
</ThemeProvider>

How do I get my material-ui cards to lineup horizontally in row direction?

I have been pulling my hair out trying to get these material-ui cards to go in a row direction with my grid - I have used these before and had no issues making them lineup in a row direction rather than in a column direction and my code is the same as I used before.
Please let me know what mistakes I have made or solutions you know of!
Just a side note the direction, wrap, justify and alignitems properties I added to the grid have made no difference at all.
Hero.js
import { Grid, makeStyles } from '#material-ui/core'
import React from 'react'
import MediaCard from './Card'
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
function Hero() {
const classes = useStyles();
return (
<div className="Hero">
<div className={classes.root}>
<Grid
Container spacing={2}
className="hero-section"
direction="row"
wrap="nowrap"
justify="center"
alignItems="center"
>
<Grid item
xs={6}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<MediaCard className="hero-card" />
</Grid>
<Grid item
xs={6}
direction="row"
justify="flex-start"
alignItems="flex-start"
>
<MediaCard className="hero-card" />
</Grid>
</Grid>
</div>
</div>
)
}
export default Hero