带有日期和样式的样式材料UI输入库时间选择器 [英] Style Material UI InputBase with Date & Time pickers

问题描述

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

I am trying to style one of the options for date time pickers found in material ui. I made a styled Input I liked, and was trying to use that as a base. Adding the type="datetime-local" prop to the component adds the functionality I need, but I can't find a way to style the icon button and the dialog.

这是我在代码沙箱中进行的实验:

Here is my experiment in code sandbox:

该组件的代码如下:

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

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

The classNames provide the styling I like for the component:

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

But I need to change the color for the calendar icon on the right and if possible the style of the date picker for a dark theme.

我该怎么做?预先感谢.

How can I do that? Thanks in advance.

推荐答案

请注意，您无法更改图标颜色(如果我理解正确的话，则更改为白色).我也尝试覆盖& .MuiInputBase-input css类，但是我唯一要做的就是更改文本颜色.

Ciao, unfortunately you cannot change icon color (to white if I understood correctly). I tried to override &.MuiInputBase-input css class also but the only thing I achieved was change text color.

但是，您可以做更多的事情(如果需要).您可以使用 @ material-ui/pickers 中的 DatePicker .当然，这更可自定义(我认为更酷).

But you can do something more (if you want). You can use DatePicker from @material-ui/pickers. This is of course more customizable (and I think more cool).

您需要什么?

1. @ date-io/moment(注意1.x版)；
2. @ material-ui/pickers;
3. @ date-io/moment;
4. 片刻；

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

Installed this libraries you can do something like that:

1. 定义主题:

1. Define a Theme:

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

创建Mui主题:

Create a Mui theme:

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 (以 moment 来管理日期):

Wrap DatePicker into a ThemeProvider (to pass Theme to DatePicker) and into a MuiPickersUtilsProvider (to manage date with 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>

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

And now if you click on date input you got this:

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

A DatePicker with a dark style. This is a date picker dialog but you can also have a date picker inline (using KeyboardDatePicker).

此处，您可以找到MaterialUI提供的所有日期选择器版本.

Here you can find all the date picker versions provided by MaterialUI.

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

I know, it's a little bit tricky the first time (how many stuff I have to do for a simple date picker!!!) but the result is graphically more beautiful.

此处 DatePicker 的codesandbox示例.

Here a codesandbox example of DatePicker.

这篇关于带有日期和样式的样式材料UI输入库时间选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！