로고 이미지

고정 헤더 영역

글 제목

메뉴 레이어

로고 이미지

메뉴 리스트

  • 홈
  • 태그
  • 분류 전체보기
    • TECH

검색 레이어

로고 이미지

검색 영역

컨텐츠 검색

DatePicker

  • MUI의 Datepicker에 사용하는 Input을 커스텀 해보자

    2022.01.12 by walkinpcm

MUI의 Datepicker에 사용하는 Input을 커스텀 해보자

최근에 MUI(Material-UI)의 Datepicker를 Input만 스타일을 수정해서 사용하는 경우가 있었습니다. MUI의 Datepicker는 기본적으로 아래와 같은 Input 스타일을 가지고 있습니다. 저는 여기에 우리 팀이 커스텀해둔 TextField를 사용하고, 캘린더 아이콘을 사용하고 싶었습니다. Datepicker 컴포넌트는 당연하게도 Input에 사용할 컴포넌트를 바꿀 수 있는 방법을 제공합니다. Datepicker의 prop중에 renderInput prop을 이용하면 됩니다. renderInput prop에 Input으로 사용할 컴포넌트를 return하는 함수를 넣어줍니다. (함수의 매개변수는 공식문서를 참고하시면 좋습니다.) 저는 TextField를 return 하게 넣어줬습니다...

TECH 2022. 1. 12. 20:46

추가 정보

인기글

  1. -
    -
    정규표현식(Regular Expression, regex)

    2021.04.14 20:13

  2. -
    -
    AWS S3에 파일을 업로드 하기 위한 Pre-signed URL과 Pre-signed POST

    2021.09.08 21:18

  3. -
    -
    emotion을 이용해서 MUI(Material-UI)의 Tooltip 컴포넌트에 커스텀 스타일 적용하는 방법

    2021.11.10 22:04

  4. -
    -
    Jira 보드에 Story 이슈 기준으로 스웜레인 만드는 방법

    2021.07.14 21:32

최신글

  1. -
    -
    Amplify Console의 Preview URL을 Custom Domain으로 사용하는 방법

    TECH

  2. -
    -
    Amplify Console에서 환경(브랜치) 제거를 막자

    TECH

  3. -
    -
    MSW를 이용해서 쉽고 깔끔하게 API Mocking 하자

    TECH

  4. -
    -
    MUI의 Datepicker에 사용하는 Input을 커스텀 해보자

    TECH

페이징

이전
1
다음
푸터 로고 © walkinpcm

티스토리툴바