[pickers][DateTimeRangePicker] trying to target the digitalClockSectionItem for styling

[cmetech]

The problem in depth

I have successfully targeted and styled the shortcuts, actionBar, day (calendar section), but I'm not able to target the hour digital clock section

Here is my DateRangePicker logic

<DateTimeRangePicker
  calendars={2}
  closeOnSelect={false}
  value={dateRange}
  defaultValue={[yesterdayRounded, todayRounded]}
  views={['day', 'hours']}
  timeSteps={{ minutes: 10 }}
  viewRenderers={{ hours: renderDigitalClockTimeView }}
  onChange={newValue => {
    // console.log('Date range:', newValue)
    setDateRange(newValue)
  }}
  onAccept={handleOnAccept}
  slotProps={{
    field: { dateSeparator: 'to' },
    textField: ({ position }) => ({
      size: 'small',
      color: position === 'start' ? 'secondary' : 'secondary',
      focused: true,
      InputProps: {
        endAdornment: <Icon icon='mdi:calendar' />
      }
    }),

    desktopPaper: {
      style: {
        backgroundColor:
          theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.common.white
      }
    },

    day: {
      sx: {
        '& .MuiPickersDay-root': {
          color: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black,
          '&:hover': {
            color:
              theme.palette.mode === 'dark'
                ? theme.palette.customColors.brandYellow
                : theme.palette.primary.light
          }
        },
        '& .MuiPickersDay-root.Mui-selected': {
          color: theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.white
        }
      }
    },

    shortcuts: {
      items: predefinedRangesDayjs,
      sx: {
        '& .MuiChip-root': {
          color:
            theme.palette.mode === 'dark'
              ? theme.palette.customColors.brandYellow
              : theme.palette.primary.main,
          '&:hover': {
            color:
              theme.palette.mode == 'dark'
                ? theme.palette.customColors.brandYellow
                : theme.palette.primary.main,
            backgroundColor:
              theme.palette.mode === 'dark' ? theme.palette.secondary.dark : theme.palette.secondary.light
          }
        }
      }
    },

    digitalClockSectionItem: {
      sx: {
        '& .MuiMenuItem-root': {
          '& .Mui-selected': {
            '& .MuiTouchRipple-root': {
              color:
                theme.palette.mode === 'dark'
                  ? theme.palette.customColors.brandYellow
                  : theme.palette.common.white
            }
          }
        },
        '& .MuiDigitalClock-list, .MuiMenuItem-root': {
          // Regular styles for your list items
          transition: 'background-color 0.3s ease', // Smooth transition for background color

          '&:hover': {
            backgroundColor:
              theme.palette.mode === 'dark'
                ? theme.palette.customColors.brandYellow3
                : theme.palette.primary.main
          }
        }
      }
    },

    actionBar: {
      actions: ['cancel', 'accept'],
      sx: {
        '& .MuiDialogActions-root, .MuiButton-root': {
          // Targeting buttons inside MuiDialogActions-root
          borderWidth: '1px', // Ensure there's a visible border
          borderStyle: 'solid', // Necessary for the border to show
          borderColor:
            theme.palette.mode === 'dark'
              ? theme.palette.customColors.brandGray1b
              : theme.palette.primary.main,
          color:
            theme.palette.mode === 'dark'
              ? theme.palette.customColors.brandWhite
              : theme.palette.primary.main,
          '&:hover': {
            backgroundColor: 'rgba(0, 0, 255, 0.04)', // Custom background color on hover
            borderColor:
              theme.palette.mode === 'dark'
                ? theme.palette.customColors.brandWhite
                : theme.palette.primary.main,
            color:
              theme.palette.mode === 'dark'
                ? theme.palette.customColors.brandYellow
                : theme.palette.primary.main
          }
        }
      }
    }
  }}

Based on documentation, I believe the digitalClockSectionItem is the correct slotProp to place the sx

I am trying to on hover add a background color to the item, and also I want to had a background color to the selected item.

Your environment

`npx @mui/envinfo`

``` System: OS: macOS 14.4.1 Binaries: Node: 19.7.0 - ~/.nvm/versions/node/v19.7.0/bin/node npm: 9.5.0 - ~/.nvm/versions/node/v19.7.0/bin/npm pnpm: 8.14.1 - /opt/homebrew/bin/pnpm Browsers: Chrome: 124.0.6367.78 Edge: Not Found Safari: 17.4.1 npmPackages: @emotion/react: 11.10.8 => 11.10.8 @emotion/styled: 11.10.8 => 11.10.8 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.10 @mui/lab: 5.0.0-alpha.128 => 5.0.0-alpha.128 @mui/material: 5.14.18 => 5.14.18 @mui/private-theming: 5.15.9 @mui/styled-engine: 5.15.9 @mui/system: 5.14.18 => 5.14.18 @mui/types: 7.2.13 @mui/utils: 5.15.14 @mui/x-charts: 7.3.0 => 7.3.0 @mui/x-data-grid: 7.3.0 @mui/x-data-grid-pro: 7.3.0 => 7.3.0 @mui/x-date-pickers: 7.2.0 => 7.2.0 @mui/x-date-pickers-pro: 7.2.0 => 7.2.0 @mui/x-license: 7.2.0 @types/react: 18.2.79 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 ```

Using Chrome Browser Using following MUI versions from package.json

"@mui/lab": "5.0.0-alpha.128", "@mui/material": "5.14.18", "@mui/system": "5.14.18", "@mui/x-charts": "7.3.0", "@mui/x-data-grid-pro": "7.3.0", "@mui/x-date-pickers": "7.2.0", "@mui/x-date-pickers-pro": "7.2.0",

Search keywords: DateTimeRangePicker styling Order ID: 84733

[noraleonte]

Hey, @cmetech 👋 Thanks for opening this issue. Does this example help?

[cmetech]

Hi @noraleonte,

What you provided was working, but when I added

views, viewRenderers

It didn't work.

My code is using the views and viewRenderers, if you can help me to get it to work in this setup that would be great.

import { renderDigitalClockTimeView } from '@mui/x-date-pickers/timeViewRenderers'

<DateTimeRangePicker
          localeText={{ start: 'Check-in', end: 'Check-out' }}
          views={['day', 'hours']}
          viewRenderers={{ hours: renderDigitalClockTimeView }}
          slotProps={{
            digitalClockSectionItem: {
              sx: {
                color: 'red',
                '&:hover': { background: 'blue' },
                '&.Mui-selected': { background: 'green' },
              },
            },
          }}
        />

Forked Example

[noraleonte]

@cmetech Here is the working example. There is a slight difference between digitalClockSectionItem, which is the item used in the multi section digital clock, and digitalClockItem which is for the simple digital clock 👌 Does this solve your issue? 😄

[cmetech]

Hi @noraleonte

Yes this resolved my issue, thanks alot

Regards Corey

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@cmetech: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.