MUIv5 x-date-pickersの曜日見出しに色をつける

はじめに

こちらのサイトを参考にしてDatePickerをカスタマイズしていましたが、私の環境では曜日の見出しの「土」「日」の色が変わりませんでした。
そこでクラス名が違うと予想し、自力で適用したい要素のクラス名を探した結果、無事に適用することができました。

検証環境

• @mui/x-date-pickers: 5.0.20
• @mui/x-date-pickers-pro: 5.0.20
• @mui/material: 5.11.4

変更後のコード

参考にさせていただいたサイトのスタイルの適用部分を以下のように変更することで、曜日見出しの「土」「日」にそれぞれ色をつけることができました！

const styles = {
	mobiledialogprops: {
		'.MuiDatePickerToolbar-title': {
			fontSize: '1.5rem',
		},
		'.MuiDayPicker-header span:nth-of-type(1)': {
			color: 'rgba(255, 0, 0, 0.6)',
		},
		'.MuiDayPicker-header span:nth-of-type(7)': {
			color: 'rgba(0, 0, 255, 0.6)',
		},
	},
	paperprops: {
		'.MuiDayPicker-header span:nth-of-type(1)': {
			color: 'rgba(255, 0, 0, 0.6)',
		},
		'.MuiDayPicker-header span:nth-of-type(7)': {
			color: 'rgba(0, 0, 255, 0.6)',
		},
	},
}