I have been trying to resolve why images do not display in MUI Card Media.
import happyImageUrl from "../Content/images/happyImageUrl";
<Stack
id="112"
direction="row"
padding="15px"
spacing={2}
justifyContent="center"
>
{this.state.moods.map(
(mood, index) =>
mood.rank > 0 &&
mood.rank <= 3 && (
<Card
key={index}
sx={{
height: "100px",
width: "100px",
background: "inherit",
}}
variant="outlined"
square
direction="row"
>
<ButtonBase onClick={this.handleClick}>
<CardMedia
className = "mood"
key={mood.moodName + mood.moodType}
component="img"
height={50}
image={ mood.imageUrl }
// backgroundImage: `url(${SobrietyCheckBg})`,
></CardMedia>
</ButtonBase>
<CardActionArea key={index}>
<CardContent fontFamily="Space Grotesk" key={index}>
{" "}
{mood.modeType}{" "}
</CardContent>
{mood.moodName}
</CardActionArea>
</Card>
)
)}
</Stack>
I'm passing in the value of the import statement; however, none of the images will load. I have tried passing the relative image path as well. Can someone point me to documentation that can help me solve my issue?
Related
I am trying to create a Dropdown which will have Menu items which would be, on hovered, deletable. I would like to insert an Icon as a children of my Menu Items, but when trying to render it with Storybook, I am getting an error : "Couldn't find story matching 'components-forms-buttons-newdropdown--new-dropdown'."
If I simply comment the Icon component, it's working fine.
Example :
<Box sx={sx} style={{ display: 'inline-block', position: 'relative' }}>
<Box
sx={{
cursor: disabled ? 'not-allowed' : undefined,
display: 'inline-block',
borderRadius: '15px',
}}
>
<StyledMuiButton
variant="outlined"
isdisabled={isdisabled}
onClick={handleClick}
endIcon={<KeyboardArrowDownIcon />}
>
<Typography variant="body1">
{defaultValue ? `${label} :` : label}
</Typography>
<Typography variant="h4">{activeOption}</Typography>
</StyledMuiButton>
</Box>
<StyledMenuContainer
isClicked={isClicked ? 1 : 0}
maxHeight={maxHeight}
>
{options?.map(option => {
return (
<StyledMenuItem
key={option.label}
value={option.value}
divider={option.divider}
disabled={option.disabled}
className={option.className}
onClick={() => handleOptionClick(option)}
>
<ListItemIcon>
{/* When uncommenting this, storybook trhows an error */}
{/* <Delete /> */}
</ListItemIcon>
<ListItemText
sx={{ color: 'grey.160' }}
primary={option.label}
/>
</StyledMenuItem>
);
})}
</StyledMenuContainer>
</Box>
I imported the Icon from MUI.
I do not get why it's not working, as I took inspiration from the documentation.
I upgraded my dependencies so it should not be related to MUI version.
storybook render
I am using MUI to develop my dashboard.
I am using MUI dropdown component to select the vendor details and there are two options for the Vendor dropdown. i.e "Surya Kumar Yadav", "Eswar". I used the same dropdown in all my cards. When I select the one of the dropdown in any card, it is reflected in all the other cards.
import React from "react";
import {
Box,
Card,
CardContent,
Typography,
Button,
CardActionArea,
CardActions,
Grid,
Select,
MenuItem,
FormControl,
InputLabel,
} from "#mui/material";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { HttpClient } from "../http/http";
import { ConfirmDialog, confirmDialog } from "./ConfirmDialog";
const Services = () => {
const [services, setServices] = useState([]);
const [vendors, setVednors] = useState([]);
const [selectedVendor, setSelectedVendor] = useState("");
const PF =
"https://firebasestorage.googleapis.com/v0/b/mern-stack-service-app.appspot.com/o/";
const navigate = useNavigate();
useEffect(() => {
init();
}, []);
const init = () => fetchServices();
const fetchServices = async () => {
const services = await HttpClient.get(`services`);
const vendors = await HttpClient.get(`vendor`);
setVednors(vendors);
setServices(services);
};
const handleChange = (event) => {
setSelectedVendor(event.target.value);
};
console.log(services);
return services.length === 0 ? (
<Grid>
<Typography
sx={{
fontSize: 32,
color: "blue",
display: "flex",
justifyContent: "center",
alignItems: "center",
textDecoration: "underline",
}}
>
Loading your services.....
</Typography>
</Grid>
) : (
<Grid container>
<ConfirmDialog />
<Grid container item xs={12} columnGap={2}>
<Box sx={{ float: "right" }}>
<Button
variant="outlined"
onClick={() => {
confirmDialog("Are you sure want to logout?", () => {
localStorage.clear();
navigate("/login");
});
}}
>
Logout
</Button>
</Box>
</Grid>
<Grid container item xs={12} rowGap={2}>
{services.map((service, index) => (
<Grid item xs={12} sm={6} md={4} key={index}>
<Card>
<CardActionArea>
<CardContent>
<Grid
component="img"
sx={{
height: 150,
width: 350,
maxHeight: { xs: 150, md: 175 },
maxWidth: { xs: 350, md: 375 },
objectFit: "cover",
}}
alt="The house from the offer."
src={
PF +
service.photo +
"?alt=media&token=c19f2d0a-f254-4391-b589-ef7ee3cad9f5"
}
></Grid>
<Grid item xs={12}>
<Typography textAlign="center">
{service.service}
</Typography>
</Grid>
<Grid item xs={12}>
<FormControl sx={{ minWidth: 120 }} size="small" fullWidth>
<InputLabel id="demo-select-small">
Select Vendor
</InputLabel>
<Select
size="small"
labelId="demo-select-small"
id="demo-select-small"
value={selectedVendor}
label="Select Vendor"
onChange={handleChange}
>
{vendors.map((vendor) => (
<MenuItem
key={vendor._id}
value={vendor.name}
id={vendor.name}
>
{vendor.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</CardContent>
</CardActionArea>
<CardActions>
<Grid item xs={12}>
<Button variant="outlined" color="primary" fullWidth>
Book Service
</Button>
</Grid>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Grid>
);
};
export default Services;
I want the dropdown action reflect in the selected card.
It's because all of your mapped Select elements get their value from selectedVendor. you can change the code like this using these steps:
First:
Change the selectingVendor useState like this:
const [selectedVendors, setSelectedVendors] = useState([]);
Second:
And the handleChange function
const handleChange = (event,index) => {
const currentSelectedVendors = [...selectedVendors];
currentSelectedVendors[index] = event.target.value
setSelectedVendors(currentSelectedVendors);
};
Third:
You need to change the Select Mui component props.
<Select
size="small"
labelId="demo-select-small"
id="demo-select-small"
value={selectedVendors[index] || ""}
label="Select Vendor"
onChange={(e) => handleChange(e,index)}
>
Although there is another solution for this problem and you can pull <Select> logic out of Services component , I mean it's selectingVendor hook and it's change handler and create a new separate component which handles it.
PS: I think it should be better to use vendor._id as the value prop of your MenuItems
For the code below
import {
TextField,
Stack,
Button,
Box,
Grid,
SvgIcon,
Typography,
Divider,
Link
} from "#mui/material";
// import IconGoogle from "../client/images/google.svg";
export default function Home() {
return (
<Grid container justifyContent="center" padding={20}>
<Grid item>
<Stack spacing={2} width={320}>
<Typography component="label" variant="h5" alignSelf="center">
Sign In
</Typography>
<Button variant="outlined" fullwidth>
{/* <IconGoogle /> */}
Sign in to Google
</Button>
<Divider> OR </Divider>
<TextField variant="outlined" label="Email" fullwidth />
<Stack>
<TextField variant="outlined" label="Password" fullwidth />
<Typography
component="label"
variant="subtitle1"
sx={{ color: "gray", fontSize: 12 }}
>
Minimum 6 Character
</Typography>
</Stack>
<Button variant="contained">Sign In</Button>
<Link component="button" underline="none" sx={{ mt: 100 }}>
Forgot Password
</Link>
</Stack>
</Grid>
</Grid>
);
}
It gives the following screen
which I expect the red rectangle portion to be much larger, since I set sx={{ mt: 100 }}. Why it's not larger and how to rectify it?
If you use padding instead of margin, it does move the button down.
<Link component="button" underline="none" sx={{ pt: 100}}>
Forgot Password
</Link>
Using the React #mui package, I want to create a grid of items that all stretch to the same height as the tallest item. I've tried searching for similar questions but have not found a working solution, and using #mui v5. Here's my example, also found on Sandbox https://codesandbox.io/s/happy-moon-y5lugj?file=/src/App.js. I prefer a solution (if possible) using the #mui components rather than grid css directly. Also I cannot fix the number of columns, it needs to be responsive.
import * as React from "react";
import {
Box,
Card,
Container,
Grid,
Paper,
Table,
TableBody,
TableRow,
TableCell,
Typography
} from "#mui/material";
export default function App() {
const createTable = (rows) => {
return (
<Table>
<TableBody>
{[...Array(rows).keys()].map((n) => {
return (
<TableRow key={n}>
<TableCell>Aaaaa</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
};
return (
<Box p={3}>
<Container maxWidth="sm" height="100%">
<Grid container spacing={2} height="100%">
<Grid item height="100%">
<Paper height="100%" elevation={3} sx={{ p: 3 }}>
<Typography variant="h4">Something</Typography>
{createTable(5)}
</Paper>
</Grid>
<Grid item height="100%">
<Paper height="100%" elevation={3} sx={{ p: 3 }}>
<Typography variant="h4">More things</Typography>
{createTable(3)}
</Paper>
</Grid>
</Grid>
</Container>
</Box>
);
}
This is what I get now. I want the shorter item to be padded on the bottom so its the same height as the first.
Please use this code from the box downwards. You can read more about how to work with grid items on the mui website here.
const StackOverflow = () => {
const createTable = (rows) => {
return (
<Table>
<TableBody>
{[...Array(rows).keys()].map((n) => {
return (
<TableRow key={n}>
<TableCell>Aaaaa</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
};
return (
<Box p={3}>
<Container maxWidth="sm">
<Grid container spacing={2}>
<Grid item xs={6}>
<Paper elevation={3} sx={{ p: 3, height: "100%" }}>
<Typography variant="h4">Something</Typography>
{createTable(5)}
</Paper>
</Grid>
<Grid item xs={6}>
<Paper elevation={3} sx={{ p: 3, height: "100%" }}>
<Typography variant="h4">More things</Typography>
{createTable(3)}
</Paper>
</Grid>
</Grid>
</Container>
</Box>
);
};
Something that worked good for me was to use the following in the Papers sx prop:
{{height: "100%", display: "flex", alignItems: "center"}}
I have a button and a CircularProgress component that are next to each other on the same row. I want to add a little bit of space between them. How can I achieve this? I've been trying using style etc but failing.
<Grid
container
direction="row"
// justify="space-between"
spacing={50}
>
<Button
variant="contained"
color="primary"
size="large"
style={{ marginTop: '1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
//code
}}
>
Import Games
</Button>
{showCircularProgress === true ? (
<CircularProgress style={{ marginTop: '1em' }} />
) : (
''
)}
</Grid>;
For that you would need to use marginRight to the direction of you next element
<Grid container direction="row">
<Button
variant="contained"
color="primary"
size="large"
style={{ marginRight: "32px" }}
>
Import Games
</Button>
<CircularProgress style={{ marginTop: "1em" }} />
</Grid>;
You could read more about CSS margin here
Simplified Working Example: