Date: Mon, 21 Apr 2025 15:43:02 -0600
Subject: [PATCH 4/6] fix: Use Pickers theme customization
---
.../employees/[[...segments]]/page.tsx | 26 ++++++-------
.../theme/customizations/inputs.tsx | 38 +++++++++----------
.../auth-nextjs-themed/theme/themeTypes.d.ts | 3 ++
3 files changed, 34 insertions(+), 33 deletions(-)
diff --git a/examples/core/auth-nextjs-themed/app/(dashboard)/employees/[[...segments]]/page.tsx b/examples/core/auth-nextjs-themed/app/(dashboard)/employees/[[...segments]]/page.tsx
index b2fea5b1deb..8ee425c8a38 100644
--- a/examples/core/auth-nextjs-themed/app/(dashboard)/employees/[[...segments]]/page.tsx
+++ b/examples/core/auth-nextjs-themed/app/(dashboard)/employees/[[...segments]]/page.tsx
@@ -6,19 +6,17 @@ import CustomDataGrid from '../../../components/CustomDataGrid';
export default function EmployeesCrudPage() {
return (
-
-
- dataSource={employeesDataSource}
- dataSourceCache={employeesCache}
- rootPath="/employees"
- initialPageSize={20}
- defaultValues={{ title: 'New Employee' }}
- slots={{
- list: {
- dataGrid: CustomDataGrid,
- },
- }}
- />
-
+
+ dataSource={employeesDataSource}
+ dataSourceCache={employeesCache}
+ rootPath="/employees"
+ initialPageSize={20}
+ defaultValues={{ title: 'New Employee' }}
+ slots={{
+ list: {
+ dataGrid: CustomDataGrid,
+ },
+ }}
+ />
);
}
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
index b8aa7f325c8..1efef818898 100644
--- a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
+++ b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
@@ -8,6 +8,7 @@ import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutline
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
import { gray, brand } from '../themePrimitives';
+import theme from '../../theme';
export const inputsCustomizations: Components = {
MuiButtonBase: {
@@ -442,27 +443,8 @@ export const inputsCustomizations: Components = {
styleOverrides: {
root: ({ theme }) => ({
color: theme.palette.grey[500],
- '.employee-edit-container & .MuiIconButton-root': {
- border: 'none',
- '&:hover': {
- backgroundColor: 'rgba(0, 0, 0, 0.04)',
- border: 'none',
- },
- '&:active': {
- border: 'none',
- },
- },
...theme.applyStyles('dark', {
color: theme.palette.grey[400],
- '.employee-edit-container & .MuiIconButton-root': {
- backgroundColor: 'transparent',
- border: 'none',
- height: 24,
- '&:hover': {
- backgroundColor: theme.palette.grey[900],
- border: 'none',
- },
- },
}),
}),
},
@@ -474,4 +456,22 @@ export const inputsCustomizations: Components = {
}),
},
},
+ MuiPickersInputBase: {
+ styleOverrides: {
+ // @ts-expect-error
+ root: ({ theme }) => ({
+ marginTop: '6px',
+ border: `1px solid ${theme.palette.divider}`,
+ ' .MuiPickersInputBase-sectionsContainer': {
+ padding: '10px 0',
+ },
+ ' .MuiPickersOutlinedInput-notchedOutline': {
+ border: 0,
+ },
+ ' .MuiIconButton-root': {
+ border: 0,
+ },
+ }),
+ },
+ },
};
diff --git a/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts b/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts
index fcfb2b39b80..a34760bd56b 100644
--- a/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts
+++ b/examples/core/auth-nextjs-themed/theme/themeTypes.d.ts
@@ -6,5 +6,8 @@ declare module '@mui/material/styles' {
defaultProps?: Partial;
styleOverrides?: Record;
};
+ MuiPickersInputBase?: {
+ styleOverrides?: Record;
+ };
}
}
From f2600b43b08461a45a8c0896970c49b0526e154c Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Tue, 22 Apr 2025 14:00:06 +0100
Subject: [PATCH 5/6] Dedupe dependencies
---
pnpm-lock.yaml | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 09e30f1738d..ac80ba33980 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -201,7 +201,7 @@ importers:
version: 7.37.4(eslint@8.57.1)
eslint-plugin-react-compiler:
specifier: latest
- version: 19.0.0-beta-af1b7da-20250417(eslint@8.57.1)
+ version: 19.1.0-rc.1(eslint@8.57.1)
eslint-plugin-react-hooks:
specifier: 5.2.0
version: 5.2.0(eslint@8.57.1)
@@ -5600,8 +5600,8 @@ packages:
peerDependencies:
eslint: '>=7.0.0'
- eslint-plugin-react-compiler@19.0.0-beta-af1b7da-20250417:
- resolution: {integrity: sha512-m3eVzHqtXFtu6rViWx/kBhv9Jcpj+Q4pkfRWyF47TIBa+Jo8DAB90OoeDh0JR896rtG1OXogLKKd+b6lzFup0A==}
+ eslint-plugin-react-compiler@19.1.0-rc.1:
+ resolution: {integrity: sha512-3umw5eqZXapBl7aQGmvcjheKhUbsElb9jTETxRZg371e1LG4EPs/zCHt2JzP+wNcdaZWzjU/R730zPUJblY2zw==}
engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
peerDependencies:
eslint: '>=7'
@@ -15409,7 +15409,7 @@ snapshots:
globals: 13.24.0
rambda: 7.5.0
- eslint-plugin-react-compiler@19.0.0-beta-af1b7da-20250417(eslint@8.57.1):
+ eslint-plugin-react-compiler@19.1.0-rc.1(eslint@8.57.1):
dependencies:
'@babel/core': 7.26.10
'@babel/parser': 7.27.0
From e0e38a0f99e3e9c697d8965646a87653065fb6ff Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Tue, 22 Apr 2025 14:08:47 +0100
Subject: [PATCH 6/6] Fix unused theme import
---
examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx | 1 -
1 file changed, 1 deletion(-)
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
index 1efef818898..f163a6e8bda 100644
--- a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
+++ b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
@@ -8,7 +8,6 @@ import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutline
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
import { gray, brand } from '../themePrimitives';
-import theme from '../../theme';
export const inputsCustomizations: Components = {
MuiButtonBase: {