diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
index f87739a40f48b..2844679ec5a00 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
@@ -1,6 +1,7 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
+import clsx from 'clsx';
import { useFormControl } from '@mui/material/FormControl';
import { styled, useThemeProps } from '@mui/material/styles';
import useForkRef from '@mui/utils/useForkRef';
@@ -8,6 +9,7 @@ import refType from '@mui/utils/refType';
import composeClasses from '@mui/utils/composeClasses';
import capitalize from '@mui/utils/capitalize';
import useSlotProps from '@mui/utils/useSlotProps';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
import visuallyHidden from '@mui/utils/visuallyHidden';
import { MuiEvent } from '@mui/x-internals/types';
import {
@@ -23,9 +25,24 @@ import {
Unstable_PickersSectionListSectionSeparator as PickersSectionListSectionSeparator,
Unstable_PickersSectionListSectionContent as PickersSectionListSectionContent,
PickersSectionElement,
+ PickersSectionListSlotProps,
} from '../../PickersSectionList';
import { usePickerTextFieldOwnerState } from '../usePickerTextFieldOwnerState';
import { PickerTextFieldOwnerState } from '../../models/fields';
+import { PickerOwnerState } from '../../models/pickers';
+
+function mergePickersInputBaseSectionContentSlotProps(
+ consumerSlotProps: PickersSectionListSlotProps['sectionContent'],
+ baseClassName: string,
+): PickersSectionListSlotProps['sectionContent'] {
+ return (ownerState: PickerOwnerState) => {
+ const resolved = resolveComponentProps(consumerSlotProps, ownerState) ?? {};
+ return {
+ ...resolved,
+ className: clsx(baseClassName, resolved.className),
+ };
+ };
+}
const round = (value: number) => Math.round(value * 1e5) / 1e5;
@@ -444,7 +461,10 @@ const PickersInputBase = React.forwardRef(function PickersInputBase(
...slotProps?.input,
ownerState,
} as any,
- sectionContent: { className: pickersInputBaseClasses.sectionContent },
+ sectionContent: mergePickersInputBaseSectionContentSlotProps(
+ slotProps?.sectionContent,
+ pickersInputBaseClasses.sectionContent,
+ ),
sectionSeparator: ({ separatorPosition }) => ({
className:
separatorPosition === 'before'
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.types.ts b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.types.ts
index 8847880c64513..7165ffc531190 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.types.ts
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.types.ts
@@ -1,7 +1,7 @@
import * as React from 'react';
import { SxProps, Theme } from '@mui/material/styles';
import { MuiEvent } from '@mui/x-internals/types';
-import { PickersSectionListProps } from '../../PickersSectionList';
+import { PickersSectionListProps, PickersSectionListSlotProps } from '../../PickersSectionList';
import { PickerTextFieldOwnerState } from '../../models/fields';
export interface PickersInputPropsUsedByField extends Pick<
@@ -83,6 +83,11 @@ export interface PickersInputBaseSlotProps {
root?: PickersInputBaseRootSlotProps;
input?: PickersInputBaseInputSlotProps;
htmlInput?: React.ComponentPropsWithRef<'input'>;
+ /**
+ * Props forwarded to each section's content element inside `PickersSectionList`.
+ * Merged with the built-in section content styles.
+ */
+ sectionContent?: PickersSectionListSlotProps['sectionContent'];
}
export interface PickersInputBaseProps
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersTextField.test.tsx b/packages/x-date-pickers/src/PickersTextField/PickersTextField.test.tsx
index ca43c81448b16..0c7d345185615 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersTextField.test.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersTextField.test.tsx
@@ -30,6 +30,52 @@ describe(' - slot forwarding', () => {
expect(screen.getByTestId('html-input')).not.to.equal(null);
});
+ it('should merge `slotProps.input.slotProps.sectionContent` onto each section content element', () => {
+ render(
+ ,
+ );
+
+ const nodes = screen.getAllByTestId('picker-section-content');
+ expect(nodes.length).to.be.greaterThan(0);
+ nodes.forEach((node) => {
+ expect(node.className).to.include('MuiPickersInputBase-sectionContent');
+ });
+ });
+
+ it('should resolve a callback `slotProps.input.slotProps.sectionContent` and merge the result onto each section content element', () => {
+ render(
+ ({
+ 'data-testid': 'picker-section-content-fn',
+ className: 'custom-section-content',
+ })) as any,
+ },
+ },
+ }}
+ />,
+ );
+
+ const nodes = screen.getAllByTestId('picker-section-content-fn');
+ expect(nodes.length).to.be.greaterThan(0);
+ nodes.forEach((node) => {
+ expect(node.className).to.include('MuiPickersInputBase-sectionContent');
+ expect(node.className).to.include('custom-section-content');
+ });
+ });
+
it('should forward `slotProps.inputLabel` to the label element', () => {
render(