帶有日期和時間選擇器的樣式材質 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 class 但我唯一實現的就是更改文本顏色。

但是你可以做更多的事情（如果你願意的話）。 您可以使用來自@material-ui/pickers DatePicker 。 這當然更可定制（我認為更酷）。

你需要什么？

1. @date-io/moment（1.x 版本注意這個）；
2. @material-ui/pickers;
3. @date-io/時刻；
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 ）。

在這里您可以找到 MaterialUI 提供的所有日期選擇器版本。

我知道，第一次有點棘手（我必須為一個簡單的日期選擇器做多少事情。！！）但結果在圖形上更漂亮。

這是DatePicker的代碼框示例。