[MUI] Tooltip 커스텀하기

MUI Tooltip을 커스텀없이 사용했을때의 모습

 

내가 필요한것 : 흰바탕에 검정글씨 툴팁

 

1. import

import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
import { styled } from "@mui/material/styles";

 

2. lightTooltip 별도 선언

- 함수 컴포넌트 외부에 선언해도 괜찮습니다

const LightTooltip = styled(({ className, ...props }: TooltipProps) => <Tooltip {...props} classes={{ popper : className }} />)(({ theme }) => ({
	[`& .${tooltipClasses.tooltip}`]: {
    	backgroundColor : theme.palette.common.white,
        color: "rgba(0,0,0,0.87)",
        boxShadow: theme.shadows[1],
        fontSize: 11,
        width: 150,
        lineHeight: 1.5,
       },
 }));

 

3. return 절에서 사용

<LightTooltip title ={툴팁에 들어갈 내용}></LightTooltip>