날짜 및 시간 선택기가있는 스타일 재질 UI InputBase

Aug 21 2020

재료 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는 구성 요소에 대해 내가 좋아하는 스타일을 제공합니다.

하지만 오른쪽에있는 달력 아이콘의 색상과 가능한 경우 어두운 테마의 날짜 선택기 스타일을 변경해야합니다.

어떻게 할 수 있습니까? 미리 감사드립니다.

답변

1 GiovanniEsposito Aug 21 2020 at 04:10

Ciao, 안타깝게도 아이콘 색상을 변경할 수 없습니다 (올바르게 이해했다면 흰색으로). &.MuiInputBase-inputCSS 클래스 를 재정의하려고 시도했지만 내가 얻은 유일한 것은 텍스트 색상을 변경하는 것입니다.

그러나 원하는 경우 더 많은 작업을 수행 할 수 있습니다. DatePicker에서 사용할 수 있습니다 @material-ui/pickers. 이것은 물론 더 많은 사용자 정의가 가능합니다 (그리고 더 멋지다고 생각합니다).

무엇이 필요합니까?

  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로 래핑합니다 .ThemeProviderThemeDatePickerMuiPickersUtilsProvidermoment

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