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';
import type { BoxProps as MuiBoxProps } from '@mui/material';

const styles = {
  root: css`
    background-color: #ffffff;
  `,
};

const BoxWhite = ({ ...other }: MuiBoxProps): JSX.Element => {
  return <MuiBox css={styles.root} {...other} />;
};

export default BoxWhite;

 

그러나, Tooltip 컴포넌트는 부모 컴포넌트의 DOM 계층 밖에 랜더됩니다. 그래서 Tooptip 컴포넌트에 스타일을 지정하는 것 만으로 원하는 스타일을 만들 수 없습니다.

관련해서 아래 2개의 링크에서 Tooptip 컴포넌트의 스타일을 커스텀 하는 방법을 안내하고 있습니다.

- https://mui.com/guides/interoperability/#portals

- https://mui.com/components/tooltips/#customization

 

그러나, 위 안내들에서는 MUI에서 제공하는 styled 유틸을 사용하는 방법만 안내하고 있습니다.

저는 프로젝트 내에서 스타일링 할때 emotion을 이용하도록 통일하고 있기 때문에 위 문서들의 방법을 그대로 사용할 수는 없었습니다.

MUI v5는 emotion을 공식적으로 지원한다고 하고 있기 때문에 분명 방법이 있을거라고 생각하고 검색을 해보니 아래와 같이 방법으로 해결할 수 있었습니다.

 

정리하자면, Tooltip 컴포넌트의 스타일을 커스텀하려면, `classes` 속성에 스타일을 지정해줘야합니다. 그래야 별도의 DOM 트리에 그려진 Tooltip 요소의 스타일을 지정할 수 있습니다. 그리고 emotion을 이용해서 classes 속성에 값을 넣어주려면 emotion에서 제공하는 ClassNames 컴포넌트로 Tooptip 컴포넌트를 감싸고, ClassNames 컴포넌트로 인해서 사용할 수 있는 css 유틸을 이용하면 Tooltip의 classes 속성에 넣어줄 값을 만들 수 있습니다.

import { Tooltip as MuiTooltip } from '@mui/material';
import type { TooltipProps as MuiTooltipProps } from '@mui/material';
import { ClassNames } from '@emotion/react';

const Tooltip = ({
  placement = 'right-start',
  children,
  ...other
}: MuiTooltipProps): JSX.Element => {
  return (
    <ClassNames>
      {({ css }) => (
        <MuiTooltip
          classes={{
            popper: css`
              &[data-popper-placement*='right']
                .MuiTooltip-tooltipPlacementRight.MuiTooltip-tooltip {
                margin-left: 8px;
              }
            `,
            tooltip: css`
              margin: 0;
              font-size: 12px;
              max-width: none;
            `,
          }}
          placement={placement}
          {...other}
        >
          {children}
        </MuiTooltip>
      )}
    </ClassNames>
  );
};

export default Tooltip;