Not able to change size of DesktopDatePicker/DatePicker

[nirali-gh]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

No response

Current behavior 😯

Currently the datepicker with size="small" not changing its size but if i render <TextField/> with size=small separately it changes size to small.

Example code:

import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
import dayjs from "dayjs";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

<LocalizationProvider dateAdapter={AdapterDayjs}>
          <DesktopDatePicker
            label="Date desktop"
            inputFormat="MM/DD/YYYY"
            value={value}
            onChange={handleChange}
            renderInput={(params) => <TextField size="small" {...params} />} /> <----- NOT working with size=small here with datepicker
</LocalizationProvider>

<TextField size="small"></TextField> <----working with size=small separately

Expected behavior 🤔

The DatePicker component should change its size when size=small applied to its TextField inside renderInput prop.

Context 🔦

Your environment 🌎

{ "name": "cartApp", "version": "0.1.0", "private": true, "dependencies": { "@date-io/jalaali": "^2.16.1", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@fontsource/roboto": "^4.5.8", "@mui/icons-material": "^5.11.9", "@mui/material": "^5.11.10", "@mui/styled-engine-sc": "^5.11.9", "@mui/x-data-grid": "^5.17.25", "@mui/x-date-pickers": "^6.0.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "dayjs": "^1.11.7", "formik": "^2.2.9", "moment": "^2.29.4", "moment-jalaali": "^0.9.6", "mui-image": "^1.0.7", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", "sass": "^1.58.3", "styled-components": "^5.3.6", "web-vitals": "^2.1.4", "yup": "^1.0.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

[varunmulay22]

is this ready to be assigned to someone? If yes, id love to pick this up :) thanks

[LukasTy]

Hello @nirali-gh With this major release we introduced some breaking changes and this is one of those. Below is a working snippet:

<DatePicker label="Basic date picker" slotProps={{ textField: { size: 'small' } }} />

You can find more information about the breaking changes and migration process here.