로고 이미지

고정 헤더 영역

글 제목

메뉴 레이어

로고 이미지

메뉴 리스트

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

검색 레이어

로고 이미지

검색 영역

컨텐츠 검색

MUI

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

    2022.01.12 by walkinpcm

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

    2021.11.10 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

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

최근에 MUI(Material-UI)에서 제공하는 Tooltip 컴포넌트의 스타일을 커스텀해야하는 일이 있었는데요. 다른 컴포넌트와는 조금 다른 방식으로 다뤄줘야해서 조금 애먹었고, 다시 애먹지 않기 위해서 정리해봅니다. 먼저, 저의 개발환경은 아래와 같았습니다. - create-react-app 기반의 React 프로젝트 - MUI v5 - @emotion/react 사용 일반적인 컴포넌트라면 아래와 같이 스타일 객체를 바로 컴포넌트에 적용해서 스타일을 커스텀할 수 있습니다. 아래 예시는 Box 컴포넌트의 백그라운드 색상을 흰색으로 설정하는 것입니다. import { css } from '@emotion/react'; import { Box as MuiBox } from '@mui/material'; ..

TECH 2021. 11. 10. 22:04

추가 정보

인기글

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

    2021.04.14 20:13

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

    2021.07.14 21:32

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

    2021.11.10 22:04

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

    2021.09.08 21:18

최신글

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

    TECH

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

    TECH

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

    TECH

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

    TECH

페이징

이전
1
다음
푸터 로고 © walkinpcm

티스토리툴바