날짜 및 시간 선택기가있는 스타일 재질 UI InputBase
재료 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는 구성 요소에 대해 내가 좋아하는 스타일을 제공합니다.


하지만 오른쪽에있는 달력 아이콘의 색상과 가능한 경우 어두운 테마의 날짜 선택기 스타일을 변경해야합니다.
어떻게 할 수 있습니까? 미리 감사드립니다.
답변
Ciao, 안타깝게도 아이콘 색상을 변경할 수 없습니다 (올바르게 이해했다면 흰색으로). &.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
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
.