I tried to change the color of the clock of timeInput (material-ui-time-picker) for the material-ui, but it's not changing.

My code is :

<TimeInput
        style ={heure}
        mode='24h'
        value={heureDebut}
        onChange={this.handleheureDChange}
        autoOk={true} 
        cancelLabel=""
        okLabel=""
        placeholder=""
        disableUnderline={true}  
        endAdornment={
            <InputAdornment position="end" style={{opacity:'0.4', marginLeft:'92px'}}>
            <IconButton><i style={{fontSize:'18px'}} className="zmdi zmdi-alarm" /></IconButton>
            </InputAdornment>
        }
                      

/>

When I run it, I get :

But I want the color blue will be changed to #0E6EB8

How can I change it?

I tried to change the color of the clock of timeInput (material-ui-time-picker) for the material-ui, but it's not changing.

My code is :

<TimeInput
        style ={heure}
        mode='24h'
        value={heureDebut}
        onChange={this.handleheureDChange}
        autoOk={true} 
        cancelLabel=""
        okLabel=""
        placeholder=""
        disableUnderline={true}  
        endAdornment={
            <InputAdornment position="end" style={{opacity:'0.4', marginLeft:'92px'}}>
            <IconButton><i style={{fontSize:'18px'}} className="zmdi zmdi-alarm" /></IconButton>
            </InputAdornment>
        }
                      

/>

When I run it, I get :

But I want the color blue will be changed to #0E6EB8

How can I change it?

• javascript
• css
• reactjs
• material-ui

5 Answers 5

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 ments.

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.

The date picker color can be changed by changing the material ui theme. I think it's a duplicate question from Change header color of Material-UI Date Picker

const muiTheme = getMuiTheme({
  datePicker: {
    selectColor: "#0E6EB8",
  },
});

class Main extends React.Component {
  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <TimeInput/>
      </MuiThemeProvider>
    );
  }
}

For further information about changing material ui theme this is the documentation https://material-ui./customization/themes/

Inspect the dial using the developer panel in the browser and see which class is responsible for the color

or

enter link description here

enter link description here