Consolidate classes naming

docs/pages/demo/datepicker/CustomDay.example.jsx

@@ -6,9 +6,9 @@ import startOfWeek from 'date-fns/startOfWeek';
 import TextField from '@material-ui/core/TextField';
 import isWithinInterval from 'date-fns/isWithinInterval';
 import { makeStyles } from '@material-ui/core';
-import { DatePicker, Day } from '@material-ui/pickers';
 // this guy required only on the docs site to work with dynamic date library
 import { makeJSDateObject } from '../../../utils/helpers';
+import { DatePicker, PickersDay } from '@material-ui/pickers';
 
 const useStyles = makeStyles(theme => ({
   highlight: {
@@ -45,7 +45,7 @@ function WeekPicker(props) {
     const isLastDay = isSameDay(dateClone, end);
 
     return (
-      <Day
+      <PickersDay
         {...DayComponentProps}
         disableMargin
         className={clsx({

docs/pages/demo/datepicker/ServerRequest.example.jsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import Badge from '@material-ui/core/Badge';
 import TextField from '@material-ui/core/TextField';
-import { DatePicker, Day } from '@material-ui/pickers';
 import { makeJSDateObject } from '../../../utils/helpers';
+import { DatePicker, PickersDay } from '@material-ui/pickers';
 import { CalendarSkeleton } from '@material-ui/pickers/CalendarSkeleton';
 
 export default function ServerRequest() {
@@ -55,7 +55,7 @@ export default function ServerRequest() {
             overlap="circle"
             badgeContent={isSelected ? '🌚' : undefined}
           >
-            <Day {...DayComponentProps} />
+            <PickersDay {...DayComponentProps} />
           </Badge>
         );
       }}

docs/pages/guides/ControllingProgrammatically.example.jsx

@@ -2,8 +2,9 @@ import React, { useState } from 'react';
 import TextField from '@material-ui/core/TextField';
 import { DatePicker } from '@material-ui/pickers';
 import { Button, makeStyles } from '@material-ui/core';
+
 const useStyles = makeStyles({
-  container: {
+  root: {
     display: 'flex',
     flexDirection: 'column',
   },
@@ -15,7 +16,7 @@ function ControllingProgrammaticallyExample() {
   const [selectedDate, handleDateChange] = useState('2018-01-01T00:00:00.000Z');
 
   return (
-    <div className={classes.container}>
+    <div className={classes.root}>
       <Button onClick={() => setIsOpen(true)}> Open picker </Button>
 
       <DatePicker

docs/pages/guides/CssOverrides.example.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import isWeekend from 'date-fns/isWeekend';
 import TextField from '@material-ui/core/TextField';
 import lightBlue from '@material-ui/core/colors/lightBlue';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core';
@@ -7,25 +8,25 @@ import { DatePicker, DatePickerProps } from '@material-ui/pickers';
 const materialTheme = createMuiTheme({
   overrides: {
     MuiPickersToolbar: {
-      toolbar: {
+      root: {
         backgroundColor: lightBlue.A200,
       },
     },
     MuiPickersCalendarHeader: {
-      switchHeader: {
+      root: {
         // backgroundColor: lightBlue.A200,
         // color: 'white',
       },
     },
     MuiPickersDay: {
-      day: {
+      root: {
         color: lightBlue.A700,
-      },
-      daySelected: {
-        backgroundColor: lightBlue['400'],
-      },
-      dayDisabled: {
-        color: lightBlue['100'],
+        '&$disabled': {
+          color: lightBlue['100'],
+        },
+        '&$selected': {
+          backgroundColor: lightBlue['400'],
+        },
       },
       today: {
         color: lightBlue['900'],
@@ -45,12 +46,12 @@ function CssOverrides() {
   return (
     <ThemeProvider theme={materialTheme}>
       <DatePicker
-        renderInput={props => <TextField {...props} />}
         label="Light blue picker"
         value={selectedDate}
         onChange={date => handleDateChange(date)}
+        renderInput={props => <TextField {...props} />}
         // @ts-ignore
-        shouldDisableDate={day => day && day.getDay() === 0}
+        shouldDisableDate={isWeekend}
       />
     </ThemeProvider>
   );

docs/pages/regression/RegressionDay.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { IUtils } from '@date-io/core/IUtils';
-import { Day, DayProps } from '@material-ui/pickers';
+import { PickersDay, PickersDayProps } from '@material-ui/pickers';
 
 export const createRegressionDay = (utils: IUtils<any>) => (
   day: any,
   selectedDate: any,
-  dayProps: DayProps
+  dayProps: PickersDayProps
 ) => {
-  return <Day {...dayProps} data-day={utils.formatByString(day, 'dd/MM/yyyy')} />;
+  return <PickersDay {...dayProps} data-day={utils.formatByString(day, 'dd/MM/yyyy')} />;
 };