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

Question

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?

Solution 1

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.

Solution 2

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);

Comments

[Michael George]

This is just a copy of the code from the link above --

[Ichrak Mansour]

@AGR how can I integrate it, because I have a constuctor and class inside it, I have timepicker

[Ichrak Mansour]

I try it, but it is not changed.

[Ichrak Mansour]

I try it, but it is not changed

[Michael George]

First try changing the color in the developer tools. Or add !important property to your css code

[Ichrak Mansour]

can you share your sandbox please ?

[Nitz]

Please inspect and find the class name and change the colour in corresponding class.

[Ichrak Mansour]

I try it, but it is not changed.