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

很抱歉，您不能将图标颜色更改为白色（如果我理解正确的话，则变为白色）。我也尝试覆盖&.MuiInputBase-input css类，但是唯一实现的是更改文本颜色。

但是，您可以做更多的事情（如果需要）。您可以使用DatePicker中的@material-ui/pickers。当然，这更可定制（我认为更酷）。

您需要什么？

@ date-io / moment（注意1.x版）；
@ material-ui / pickers;
@ date-io / moment;
片刻；

安装此库后，您可以执行以下操作：

定义主题：

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

创建Mui主题：
```
const theme = createMuiTheme(Theme);
```

使用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}
   />

将DatePicker包装到ThemeProvider中（将Theme传递到DatePicker）和MuiPickersUtilsProvider中（使用{{1管理日期}}）：
```
moment
```

现在，如果您单击日期输入，则会得到以下信息：

具有深色样式的DatePicker。这是一个日期选择器对话框，但您也可以内联一个日期选择器（使用<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>）。

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

我知道，第一次有点棘手（我需要为一个简单的日期选择器做多少事情！！！），但是结果在图形上更加美观。

Here是KeyboardDatePicker的codeandbox示例。

Answer 2

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

它是平台原生元素，因此您需要引用底层标签。

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

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

2 个答案: