[pickers] Not possible to provide custom styling to the DesktopDatePicker component

[Theofilos-Chamalis]

I have updated to the latest @mui/material v5.0.1, used the DesktopDatePicker component and tried to provide custom styling to it (different background-color, font color, date-selection color and a different input field style).

Using the renderInput to render our custom InputField component was successfull, however I was not able to style the elements from the Modals that show up (a.k.a MuiCalendarPicker).

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I have used the following methods which were unsuccessful:

1. Wrap the DesktopDatePicker or its LocalizationProvider wrapper component with the ThemeProvider using a custom theme.
2. Using the style prop in the DesktopDatePicker
3. Using the sx prop in the DesktopDatePicker (trying to select the MuiCalendarPicker component with sx={{'& .MuiCalendarPicker-root':{backgroundColor: 'purple'}}}
4. Using the PopperProps (this only controls an overlay behind the actual MuiCalendarPicker)
5. Using a custom classname and selecting '& .MuiCalendarPicker-root' or '& .MuiCalendarPicker' to style.

Expected Behavior 🤔

The styling of the MuiCalendarPicker or the styling of the Modal contents in general should change

Your Environment 🌎

`npx @mui/envinfo`

   System:
    OS: macOS 11.6
  Binaries:
    Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v16.10.0/bin/yarn
    npm: 7.24.1 - ~/.nvm/versions/node/v16.10.0/bin/npm
  Browsers:
    Chrome: 94.0.4606.61
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled:  10.0.27 
    @mui/core:  5.0.0-alpha.48 
    @mui/lab: ^5.0.0-alpha.48 => 5.0.0-alpha.48 
    @mui/material: ^5.0.1 => 5.0.1 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/styled-engine-sc: ^5.0.0 => 5.0.0 
    @mui/system:  5.0.1 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @types/react: 17.0.24 => 17.0.24 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    styled-components: ^5.3.1 => 5.3.1 
    typescript: 4.4.3 => 4.4.3 
    
    The browser used is Google Chrome v94
    Next.js v11.1.2 is also used

[sumitnitsurat]

its happening for all other components also. Native styling is getting priority over sx styling. so can not override it.

[Theofilos-Chamalis]

Thank you @sumitnitsurat for the feedback.
Is there any way to override the styling of the DesktopDatePicker (excluding the input component)?

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest).
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[Theofilos-Chamalis]

@eps1lon

Here is a sample sandbox with what have right now: https://codesandbox.io/s/crazy-frost-130vs

Unfortunately we are not allowed to post the InputField implementation, but it should give you an idea of our current state. Keep in mind that this is using the default styling for:

1. The .MuiCalendarPicker-root (which we want to change)
2. The circles around the dates (which we want to change)
3. The date colors (which we also want to change)
4. The fonts and its sizes

As mentioned in the first message we tried to override the default styling using the aforementioned 5 methods.

[iyinolu]

I am facing a similar issue and here is my observation so far. The latest version createTheme does not support style overrides directly. You'd need to go through the components field of createTheme and use styleOverrides property. Now, MuiCalendarPicker is not a valid component type and hence it's styles can't be overridden this way.

[lengwe]

Having the same issue here. Tried ThemeProvider, className and PaperProps but got no solutions. I also found in the DesktopDatePicker API webpage, the CSS API is not included. However, there is a PickersDay component which contains the CSS API but I am not sure if this is related to the DesktopDatePicker.

[lengwe]

@eps1lon

Here is a sample sandbox with what have right now: https://codesandbox.io/s/crazy-frost-130vs

Unfortunately we are not allowed to post the InputField implementation, but it should give you an idea of our current state. Keep in mind that this is using the default styling for:

1. The .MuiCalendarPicker-root (which we want to change)
2. The circles around the dates (which we want to change)
3. The date colors (which we also want to change)
4. The fonts and its sizes

As mentioned in the first message we tried to override the default styling using the aforementioned 5 methods.

Think I have solved the problem. The way that I did is to use PaperProps. Before, I used classes attribute such as PaperProps={{classes: {.....}}} and this will not override the styles. Instead, I used className later and it worked. I have attached the screenshots.

Whereas in the classes.datePicker:

Hope this helps!

Edit:
I then also discovered a new way to override the DatePicker using the createTheme(). Here is the sample sand box link: https://codesandbox.io/s/inputlabel-focused-forked-xtos4?file=/src/App.js

[flaviendelangle]

Duplicates #6218, we are discussing this problem there 👍