带有日期和时间选择器的样式材质 UI InputBase

Question

我正在尝试为材料 ui 中的日期时间选择器设置其中一个选项的样式。我做了一个我喜欢的风格输入，并试图以此为基础。将type="datetime-local" 属性添加到组件中添加了我需要的功能，但我找不到设置图标按钮和对话框样式的方法。

这是我在代码沙箱中的实验：

组件的代码如下所示：

<Paper component="form" className={classes.paper} elevation={0}>
  <InputBase
    className={classes.input}
    type="datetime-local"
    defaultValue="2017-05-24T10:30"
  />
</Paper>

classNames 为组件提供了我喜欢的样式：

但我需要更改右侧日历图标的颜色，并尽可能更改深色主题的日期选择器样式。

我该怎么做？提前致谢。

Answer 1

幸运的是，您可以更改图标。

是平台原生元素，所以需要引用底层标签。

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

Answer 2

Ciao，很遗憾，您无法更改图标颜色（如果我理解正确，则为白色）。我也尝试覆盖&.MuiInputBase-input css 类，但我唯一实现的就是更改文本颜色。

但是你可以做更多的事情（如果你愿意的话）。您可以使用来自@material-ui/pickers 的DatePicker。这当然更可定制（我认为更酷）。

你需要什么？

1. @date-io/moment（1.x版本注意这个）；
2. @material-ui/pickers;
3. @date-io/moment;
4. 时刻;

安装了这个库你可以做这样的事情：

1. 定义主题：

   const Theme = {
     palette: {
       primary: {  // primary color
       contrastText: "#FFFFFF",
       dark: "#000000",  
       main: "#000000",  // black
       light: "#000000"
     }
   }
   };
   

2. 创建一个 Mui 主题：

   const theme = createMuiTheme(Theme);
   

3. 使用DatePicker：

    <DatePicker
        format={"DD-MM-YYYY"}  // your date format
        label="my date"
        inputVariant="outlined" // if you want an outlined date input
        helperText=""
        size="small"
        value={myDate}
        onChange={setmyDate}
      />
   

4. 将DatePicker 包装成ThemeProvider（将Theme 传递给DatePicker）和MuiPickersUtilsProvider（使用moment 管理日期）：

    <ThemeProvider theme={theme}>
      <MuiPickersUtilsProvider utils={MomentUtils}>
        <div className="App">
          <DatePicker
            format={"DD-MM-YYYY"}
            label="my date"
            inputVariant="outlined"
            helperText=""
            size="small"
            value={myDate}
            onChange={setmyDate}
          />
        </div>
      </MuiPickersUtilsProvider>
    </ThemeProvider>
   

现在如果你点击日期输入，你会得到这个：

具有深色样式的 DatePicker。这是一个日期选择器对话框，但您也可以使用内联日期选择器（使用 KeyboardDatePicker）。

Here你可以找到MaterialUI提供的所有日期选择器版本。

我知道，第一次有点棘手（我必须为一个简单的日期选择器做多少事情！！！）但结果在图形上更漂亮。

HereDatePicker 的代码框示例。