How to set the color of the clock (timePicker) with material-ui?

So this is an old question but I was trying to do the same and got here hoping to find a solution.

Here is what I learned:

The only way I found to change the clock and calendar styles is to override the default theme.

Here is a codeSandbox where I did my experiments.

Also, I posted a question regarding this and there were some helpful comments.

It is a real pain to do this with material UI, specially since you need to find out how to override the theme on your own, using the inspector. Hopefully the things I figured out in the codeSandbox example are enough to help the next person.

DISCLAIMER: Sorry for all the unnecessary code in my example. I was trying different approaches.

Source

import DateFnsUtils from "material-ui-pickers/utils/date-fns-utils";import React from "react";import MuiPickersUtilsProvider from "material-ui-pickers/utils/MuiPickersUtilsProvider";import DatePicker from "material-ui-pickers/DatePicker";import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";import PropTypes from "prop-types";import { withStyles } from "@material-ui/core/styles";const styles = theme => ({  input: {    color: "red"  }});const Calendar = ({ classes, ...rest }) => (  <MuiPickersUtilsProvider utils={DateFnsUtils}>    <DatePicker      {...rest}      leftArrowIcon={<KeyboardArrowLeft />}      rightArrowIcon={<KeyboardArrowRight />}      InputProps={{ className: classes.input }}    />  </MuiPickersUtilsProvider>);Calendar.propTypes = {  classes: PropTypes.object.isRequired};export default withStyles(styles)(Calendar);

To change the color, you need to change the background color in css..MuiPickersToolbar-toolbar-2295 is the class name. So change background color in this class.