I tried to get Pagination from Material-UI
but I want to center the buttons of the arrow and number of page.
I tried to center by creating a <div style={{textAlign: "center"}}> but it doesn't work because it came all in one box.
there is any way to get inside the this component and make the numbers and button to get in the center?
If you're using TablePagination, you need to remove the spacer div which push the pagination content to the right and set the container justify-content to center:
import TablePagination, {
tablePaginationClasses
} from "#mui/material/TablePagination";
<TablePagination
sx={{
[`& .${tablePaginationClasses.spacer}`]: {
display: "none"
},
[`& .${tablePaginationClasses.toolbar}`]: {
justifyContent: "center"
}
}}
{...}
/>
If you're using the Pagination from DataGrid, just set the justify-content to center because the container is already flex:
import { makeStyles } from "#mui/styles";
import { paginationClasses } from "#mui/material/Pagination";
const useStyles = makeStyles({
root: {
[`& .${gridClasses.footerContainer}`]: {
justifyContent: "center"
}
}
});
<DataGrid pagination {...data} className={classes.root} />
Their Pagination component is using display: flex. Adding the following style rule should achieve what you're trying to do
.MuiPagination-ul { justify-content: center; }
using below code
<Box display="flex" justifyContent="center">
<Pagination ... />
</Box>
To center pagination, i suggest you wrap it inside a Grid System, then put it in the middle of two grid items with the flexGrow property equal to 1.
<Grid container>
<Grid item sx={{ flexGrow: 1 }}></Grid>
<Grid item>
<Pagination />
</Grid>
<Grid item sx={{ flexGrow: 1 }}></Grid>
</Grid>
Related
Background: Hello, I am using React with the latest MUI version of Material-UI. I am using Data-Grid in a separate file in my components folder. I call the component from my App and use states to handle adding rows. On init 50 rows are added.
Issue: When I add onRowEditStart={console.log("Start")} & onRowEditStop={console.log("stop")} to the DataGrid component, they are only fired on page load, but if I edit a column after, no events are fired?
Whole components/DataGrid.js added.
If anyone has info on this would be great, thanks!
import * as React from 'react';
import { DataGrid, GridToolbar } from '#mui/x-data-grid';
import Box from '#mui/material/Box';
import Stack from '#mui/material/Stack';
import Button from '#mui/material/Button';
export default function Table(props) {
const [rows, setRows] = React.useState(props.rows);
React.useEffect(() => {
setRows(props.rows);
}, [props.rows]);
return (
<div style={{ width: '100%' }}>
<Stack
sx={{ width: '100%', mb: 1 }}
direction="row"
alignItems="flex-start"
columnGap={1}
>
</Stack>
<Box sx={{ height: 400, bgcolor: 'background.paper' }}>
<DataGrid autoHeight
components={{
Toolbar: GridToolbar,
}}
pageSize={25}
rowsPerPageOptions={[25, 50, 100]}
onRowEditStart={console.log("Start")}
onRowEditStop={console.log("stop")}
experimentalFeatures={{ newEditingApi: true }}
rows={rows}
columns={props.columns}
loading={props.rows.length === 0}
columnGap={1}
rowHeight={75}
/>
</Box>
</div>
);
}
The reason for this is because both onRowEditStart and onRowEditStop accept functions.
If you replace your code with the following, it will work.
onRowEditStart={() => console.log("Start")}
onRowEditStop={() => console.log("stop")}
Notice the difference in your code.
onRowEditStart={console.log("Start")} // evaluated on page load
onRowEditStop={console.log("stop")} // evaluated on page load
By passing a function (onRowEditStart={() => console.log("Start")}), the console.log("Start") will only be run when a row edit has started.
I'm trying to create a landing page in MUI v5 where half of the page is an image and the second part of the page is a form to login. I want the image and form to always fill the page completely with no scroll.
However, when doing so, it seems that MUI root is always affecting the margin so that the view has a horizontal scroll and there is white space on the left-hand side (See example below - and ignore the silly image):
How the page should look (and what it looks like if I scroll to the right):
How the page should look when I load it before scrolling:
I've spent hours trying to edit the CSS and figuring out where this is coming from with no luck. There is probably a better way to format this but I am using Grid and have tried Box with no luck.
My source code looks something like:
import React from "react";
import PropTypes from "prop-types";
import Grid from "#mui/material/Grid/Grid";
import Box from "#mui/material/Box";
import Paper from "#mui/material/Paper";
import SomeComponent from "...{some_path}...";
import SomeFormComponent from "...{some_path}...";
const SomeComponent = ({children, title, width}) => {
return (
<Grid container disableGutters sx={{height: "100vh", width: "100vw"}}>
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: `url(${SomeImage})`,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<SomeFormComponent width={width} title={title}>
{children}
</SomeFormComponent>
</Box>
</Grid>
</Grid>
);
};
Also, inspecting the page elements, I've identified the padding and margin come from a class called css-ayh9c9-MuiGrid-root which seems to be causing this because if I remove the class from the parent, everything works as expected. However, this is being added by MUI behind the scenes because it is nowhere in my source code.
Any help would be greatly appreciated!
I prefer Box whenever possible because Grid does some funky stuff with margins. In this case you can use the flex attribute on the children to get the right proportions. here is a working example https://codesandbox.io/s/material-demo-forked-rur3t?file=/App.tsx
hope you're all good.
I'm having an issue finding out how to make my MUI Grid take up the entire width of the Box component it is nested within.
Here is how it looks:
I want the empty space at the end right to be taken up by the entire grid but I can't seem to find a concise answer on how to fix this.
Here is my code in VS Code:
Here is the code in text for the Grid:
<Grid item key={days}>
<Box
key={days}
sx={{
width: 150,
height: 150,
backgroundColor: 'primary.dark',
'&:hover': {
backgroundColor: 'primary.main',
opacity: [0.9, 0.8, 0.7],
},
}}
/>
</Grid>
);
}
return (
<Grid container spacing={1}>
{/* And here I render the box array */}
{box}
</Grid>
);
And here is the parent elements:
Here is the code in real text for the parent elements:
// Parent Element
<Container>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: 1,
}}
>
{/* The Title of The Page */}
<Typography align="center" variant="h4" mt={2} mb={2} sx={{ fontWeight: 'bold' }}>
{t('Happy Chocolate Days!')}
</Typography>
{/* My Calendar Grid Component Inside The Box Component */}
<Calendar />
</Box>
</Container>
Thanks for any help in advance
You are setting the boxes to a fixed width & height of 150, thus even though their wrapper has more space left, there is not enough space for another box so it breaks into a new line, thus leaving you with the empty space on the right.
You either set the boxes all of them in the middle of the Container,
OR pick a width for the Container that can have 7 boxes of the same width with some space between them, like 770px width for container, and 10px spaces between them. but in that case you wont need Grid, just pure css.
I'm styling a MUI v5 Grid as follows:
const SettingsGrid = styled(Grid)(({ theme }) => ({
width: `calc(100% - calc(${Number(theme.spacing(2))} * 2))`,
margin: theme.spacing(2),
'& .MuiCard-root + .MuiTypography-subtitle1': {
marginTop: theme.spacing(4),
},
}))
Then, I'm using it as follows:
<Box m={1} overflow="auto">
<SettingsGrid
container
direction="row"
justifyContent="center"
>
<Grid
direction="column"
style={{ minWidth: '35em', maxWidth: '60em' }}
>
<!-- ... -->
</Grid>
</SettingsGrid>
</Box>
This now throws this console warning at runtime:
Failed prop type: The prop `direction` of `Grid` can only be used together with the `container` prop.
I've tried with container={true} but this doesn't help. It seems as if the container property gets lost in styled(). How can I fix this? I'm at a loss.
EDITH: https://codesandbox.io/s/gritty-styled-grid-7l04g
The direction prop of your Grid is only valid if the container prop is set to true, so add the missing container prop in your inner Grid. Internally, a container Grid has the display set to flex, and the direction is mapped to flex-direction, flex-direction is meaningless if the layout is not flex:
<Grid container direction='column'
Just to add to what NearHuscarl has mentioned, this is the place where you are missing the container prop.
<Box m={1} overflow="auto">
<SettingsGrid
container
direction="row"
justifyContent="center"
>
<Grid
container <<<------------------ you are missing this
direction="column"
style={{ minWidth: '35em', maxWidth: '60em' }}
>
<!-- ... -->
</Grid>
</SettingsGrid>
</Box>
I want to vertically align some text in a MUI Paper component.
The code is here.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Typography from '#material-ui/core/Typography';
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(3, 2),
height: 200,
verticalAlign: 'middle'
},
}));
function PaperSheet() {
const classes = useStyles();
return (
<div>
<Paper className={classes.root}>
<Typography variant="h5" component="h3">
This is a sheet of paper.
</Typography>
<Typography component="p">
Paper can be used to build surface or other elements for your application.
</Typography>
</Paper>
</div>
);
}
export default PaperSheet;
vertical-align CSS property only works with display: block element.
An option for you could be to declare your root class using flexbox:
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(3, 2),
height: 200,
display: "flex",
flexDirection: "column",
justifyContent: "center"
},
}));
You can use Stack in MUI v5. Set the direction to column and justifyContent to center to center align the content inside the Card:
<Paper component={Stack} direction="column" justifyContent="center">
<div>
This content is vertically aligned
</div>
</Paper>
Live Demo