如何用material-ui设置时钟（timePicker）的颜色？答案

【问题标题】：How to set the color of the clock (timePicker) with material-ui?如何用material-ui设置时钟（timePicker）的颜色？
【发布时间】：2019-04-15 07:50:39
【问题描述】：

我尝试更改 material-ui 的 timeInput (material-ui-time-picker) 时钟的颜色，但它没有改变。

我的代码是：

<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>
        }
                      

/>

当我运行它时，我得到：

但我想把蓝色改成#0E6EB8

我怎样才能改变它？

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

所以这是一个老问题，但我试图做同样的事情并来到这里希望找到解决方案。

这是我学到的：

我发现更改时钟和日历样式的唯一方法是覆盖默认主题。

Here 是我进行实验的代码沙盒。

另外，我为此发布了question，并且有一些有用的 cmets。

使用材质 UI 执行此操作确实很痛苦，特别是因为您需要了解如何使用检查器自行覆盖主题。希望我在 codeSandbox 示例中发现的内容足以帮助下一个人。

免责声明：对不起，我的示例中所有不必要的代码。我尝试了不同的方法。

【讨论】：

【解决方案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);

【讨论】：

这只是上面链接中的代码副本 --
@AGR 如何集成它，因为里面有一个构造函数和类，我有时间选择器

【解决方案3】：

要改变颜色，你需要改变css中的背景颜色。 .MuiPickersToolbar-toolbar-2295 是类名。所以在这个类中改变背景颜色。

【讨论】：

你能分享一下你的沙盒吗？
请检查并找到类名并更改相应类的颜色。
我试了一下，还是没变。

【解决方案4】：

日期选择器颜色可以通过更改材质 UI 主题来更改。我认为这是来自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>
    );
  }
}

有关更改材质 ui 主题的更多信息，请参阅文档https://material-ui.com/customization/themes/

【讨论】：

我试了一下，还是没变

【解决方案5】：

使用浏览器中的开发者面板检查表盘，看看哪个类负责颜色

或

enter link description here

【讨论】：

我试了一下，还是没变。
首先尝试在开发者工具中更改颜色。或者将 !important 属性添加到您的 CSS 代码中