diff --git a/.changeset/long-dolls-shake.md b/.changeset/long-dolls-shake.md new file mode 100644 index 0000000000..dfc413efc9 --- /dev/null +++ b/.changeset/long-dolls-shake.md @@ -0,0 +1,5 @@ +--- +"@comet/admin-theme": patch +--- + +Fix spacing between page number and chevron icon in the pagination select of `DataGrid` diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiTablePagination.ts b/packages/admin/admin-theme/src/componentsTheme/MuiTablePagination.ts new file mode 100644 index 0000000000..30a3e78902 --- /dev/null +++ b/packages/admin/admin-theme/src/componentsTheme/MuiTablePagination.ts @@ -0,0 +1,15 @@ +import { inputBaseClasses, tablePaginationClasses } from "@mui/material"; + +import { mergeOverrideStyles } from "../utils/mergeOverrideStyles"; +import { GetMuiComponentTheme } from "./getComponentsTheme"; + +export const getMuiTablePagination: GetMuiComponentTheme<"MuiTablePagination"> = (component, { palette }) => ({ + ...component, + styleOverrides: mergeOverrideStyles<"MuiTablePagination">(component?.styleOverrides, { + select: { + [`&.${inputBaseClasses.input}.${tablePaginationClasses.select}`]: { + paddingRight: 32, + }, + }, + }), +}); diff --git a/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts b/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts index 1c622d8d0d..cece1bc7ea 100644 --- a/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts +++ b/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts @@ -42,6 +42,7 @@ import { getMuiSvgIcon } from "./MuiSvgIcon"; import { getMuiSwitch } from "./MuiSwitch"; import { getMuiTab } from "./MuiTab"; import { getMuiTableCell } from "./MuiTableCell"; +import { getMuiTablePagination } from "./MuiTablePagination"; import { getMuiTableRow } from "./MuiTableRow"; import { getMuiTabs } from "./MuiTabs"; import { getMuiToggleButton } from "./MuiToggleButton"; @@ -108,4 +109,5 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData) MuiToggleButtonGroup: getMuiToggleButtonGroup(components.MuiToggleButtonGroup, themeData), MuiTooltip: getMuiTooltip(components.MuiTooltip, themeData), MuiTypography: getMuiTypography(components.MuiTypography, themeData), + MuiTablePagination: getMuiTablePagination(components.MuiTablePagination, themeData), });