Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 10x 91x 91x 91x | import { alpha } from "@mui/material/styles";
import { paginationItemClasses } from "@mui/material/PaginationItem";
// ----------------------------------------------------------------------
const COLORS = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
// NEW VARIANT
// ----------------------------------------------------------------------
export function pagination(theme) {
const lightMode = theme.palette.mode === 'light';
const rootStyles = (ownerState) => {
const defaultColor = ownerState.color === 'standard';
const filledVariant = ownerState.variant === 'text';
const outlinedVariant = ownerState.variant === 'outlined';
const softVariant = ownerState.variant === 'soft';
const defaultStyle = {
[`& .${paginationItemClasses.root}`]: {
...(outlinedVariant && {
borderColor: alpha(theme.palette.grey[500], 0.24),
}),
[`&.${paginationItemClasses.selected}`]: {
fontWeight: theme.typography.fontWeightSemiBold,
...(outlinedVariant && {
borderColor: 'currentColor',
}),
...(defaultColor && {
backgroundColor: alpha(theme.palette.grey[500], 0.08),
...(filledVariant && {
color: lightMode ? theme.palette.common.white : theme.palette.grey[800],
backgroundColor: theme.palette.text.primary,
'&:hover': {
backgroundColor: lightMode ? theme.palette.grey[700] : theme.palette.grey[100],
},
}),
}),
},
},
};
const colorStyle = COLORS.map((color) => ({
...(ownerState.color === color && {
[`& .${paginationItemClasses.root}`]: {
[`&.${paginationItemClasses.selected}`]: {
...(ownerState.color === color && {
// SOFT
...(softVariant && {
color: theme.palette[color][lightMode ? 'dark' : 'light'],
backgroundColor: alpha(theme.palette[color].main, 0.08),
'&:hover': {
backgroundColor: alpha(theme.palette[color].main, 0.16),
},
}),
}),
},
},
}),
}));
return [defaultStyle, ...colorStyle];
};
return {
MuiPagination: {
styleOverrides: {
root: ({ ownerState }) => rootStyles(ownerState),
},
},
};
}
|