I have some Hidden components below:
<Hidden smUp>
...
</Hidden>
<Hidden xsDown>
...
</Hidden>
It's deprecated in V5. So how can I use Paper & Box components as in the migration documents?
Sorry but it's quite difficult to follow the guide.
In the Migration from v4 documentation, this is actually pretty good explained.
You have to replace
<Hidden smUp>
...
<Hidden/>
with
<Paper sx={{ display: { xs: "block", sm: "none" } }}>
...
</Paper>
// or
<Box sx={{ display: { xs: "block", sm: "none" } }}>
...
</Box>
and
<Hidden xsDown>
...
</Hidden>
with
<Paper sx={{ display: { xs: "none", sm: "block" } }}>
...
</Paper>
// or
<Box sx={{ display: { xs: "none", sm: "block" } }}>
...
</Box>
Live demo:
Related
like in mui components make an asterisk before the text?
The documentation doesn't say anything about it.
https://mui.com/material-ui/react-text-field/
The documentation makes it very clear under Input Adornments. You can put whatever you want in the beginning or end of the text field using input adornments.
Sample code:
import * as React from 'react';
import Box from '#mui/material/Box';
import InputAdornment from '#mui/material/InputAdornment';
import TextField from '#mui/material/TextField';
export default function InputAdornments() {
return (
<Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
<div>
<TextField
id="outlined-start-adornment"
sx={{ m: 1, width: '25ch' }}
InputProps={{
startAdornment: <InputAdornment position="start">*</InputAdornment>,
}}
/>
</div>
</Box>
);
}
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
everyone. I want to show a cluster using mapbox. I get it to the point where I can see the number of markers within a cluster. However, if I zoom into the map, the display does not change to where I see individual markers on the map. See image. I use the following lib for the mapbox for React: https://visgl.github.io/react-map-gl/docs/api-reference/map
. Thank you very much
useEffect(() => {
const points = alleArtikel.map((artikel) => ({
type: "Feature",
properties: {
cluster: false,
artikelId: artikel._id,
name: artikel.name,
beschreibung: artikel.beschreibung,
lng: artikel.long,
lat: artikel.lat,
bild: artikel.bild,
userId: artikel.userId,
},
geometry: {
type: "Point",
coordinates: [parseFloat(artikel.long), parseFloat(artikel.lat)],
},
}));
setPoints(points);
}, [alleArtikel]);
useEffect(() => {
supercluster.load(points);
setClusters(supercluster.getClusters(bounds, zoom));
}, [points, zoom, bounds]);
useEffect(() => {
if (mapRef.current) {
setBounds(mapRef.current.getMap().getBounds().toArray().flat());
}
}, [mapRef?.current]);
{clusters?.map((artikel) => {
const { cluster: isCluster, point_count } = artikel.properties;
const [longitude, latitude] = artikel.geometry.coordinates;
if (isCluster) {
return (
<Marker
key={artikel.id}
longitude={longitude}
latitude={latitude}
onClick={() => setShowPopup(true)}
>
<div
className="cluster-marker"
style={{
width: `${13 + (point_count / points.length) * 20}px`,
height: `${13 + (point_count / points.length) * 20}px`,
}}
onClick={() => {
const zoom = Math.min(
supercluster.getClusterExpansionZoom(artikel.id),
10
);
mapRef?.current.flyTo({
center: [longitude, latitude],
zoom,
speed: 1,
});
}}
>
{point_count}
</div>
</Marker>
);
}
return (
<Marker
key={artikel.properties.artikelId}
longitude={longitude}
latitude={latitude}
>
<Box sx={{ position: "realtive" }}>
<Tooltip title={artikel.properties.beschreibung}>
<img
src={artikel.properties.bild}
width={40}
height={40}
/>
</Tooltip>
{showPopup && (
<Popup
closeOnClick={false}
closeButton={true}
longitude={longitude}
latitude={latitude}
anchor="bottom"
onClose={() => setShowPopup(false)}
style={{ position: "absolute", top: -40 }}
>
<Stack direction={"column"}>
<Box>
<img
src={artikel.properties.bild}
style={{ maxWidth: 200 }}
></img>
</Box>
<Box>
<Typography variant="body2" align="center">
{artikel.art}
</Typography>
</Box>
<Box>
<Typography variant="body1" align="center">
{artikel.name}
</Typography>
</Box>
<Box>
<Button variant="contained" fullWidth>
anfragen
</Button>
</Box>
</Stack>
</Popup>
)}
</Box>
</Marker>
);
})}
This is what the map looks like when it is initially loaded
If I zoom in very closely, the point does not change or split
The size of the main area of the DataGrid changes with the window size but seems to ignore the size required for the page footer (so a scroll bar remains).
export default class DebugDisplay extends Component {
render = () => {
return <Box >
<DataAdapter localDbConnect="items" setAccessor={this.setAccessor}/>
<AppBar position="static">
<Toolbar>
<IconButton color="inherit" aria-label="Menu" onClick={this.toggleMenu}>
<MenuIcon />
</IconButton>
<Typography variant="h6" sx={{flexGrow:1, flexDirection: "row"}}>
POS Web Debug {this.state.timestamp}
</Typography>
</Toolbar>
</AppBar>
<Drawer type="temporary" open={this.state.debugMenuOpen} onClose={this.toggleMenu}>
<Box sx={{display: "flex", flexDirection: "column", flexGrow: 1}}>
<Button onClick={this.toggleMenu}>Close</Button>
<Divider />
<Button onClick={this.testEnter}>Test Enter</Button>
<Button onClick={this.testTotal}>Test Total</Button>
<Button onClick={this.testInvoice}>Test Invoice</Button>
</Box>
</Drawer>
<Paper >
<Button onClick={this.testEnter} variant="outlined">Test Enter</Button>
<Button onClick={this.testTotal} variant="outlined">Test Total</Button>
<Button onClick={this.testInvoice} variant="outlined">Test Invoice</Button>
<DataGrid sx={{display: "flex", flexGrow:1, flexDirection: "column"}} rows={this.state.rows} columns={itemColumns} autoPageSize pagination density="compact" onCellClick={this.onCellClick}/>;
</Paper>
</Box>;
}
What is wrong?
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"}}