[pickers] Change days of the week styling

[amcmilne]

Related page

https://mui.com/x/react-date-pickers/date-picker/

Kind of issue

Other

Issue description

How do you target the Days of the Week (S M T W T F S) to changes the styling. I've tried targeting [& .{dayCalendarClasses.weekDayLabel}]: {} in several ways without luck.

Context

I would like to change the font size, color, and family.

Search keywords: days of the week

[michelengelen]

Well, this does work for me:

import * as React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateCalendar, dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';

export default function BasicDateCalendar() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DateCalendar
        sx={{
          [`& .${dayCalendarClasses.weekDayLabel}`]: {
            color: 'red',
          },
        }}
      />
    </LocalizationProvider>
  );
}

Did you maybe have a typo somewhere?

[LukasTy]

There could have been an issue of where the sx prop is defined.
Doing the above on DatePicker won't work, because the sx prop is propagated to the Text Field.
You can find examples of how to override certain parts of Pickers components here.
Consider using the theme to override certain parts, as it's the most straightforward way.