MUI Tooltip custom 적용 안 될 때 | componentsProps

진짜 별 난리를 다했는데 …

 

mui v5 에는 이 props를 사용하면 된단다…

 

찾은방법 :

“How to custimize mui tooltip” 구글링 -> stack overflow에서 최신글 선택-> 댓글 열심히보기

(개발자는 영어를 가깝게 지내자… )

 

이 답변을 가지고 바로 적용해봤다… 아무리 해도 안되던 font size 가 바꼈다…

 

한시간 반동안 찾았는데… styled, createStyle 겁나 분석했는데 아무리해도 기본 css가 박힌것 처럼 font css가 먹히지 않았었다. (아래 두개 사진 참고)

 

 

전체코드는 아래와 같다.

import tw from "twin.macro";
import Tooltip from "@mui/material/Tooltip";
import QuestionmarkSvg from "@public/images/settings/questionmark.svg";
  
const tooltipTitle = {
    guide1: " 채널 이름 및 설명, 번역, 링크 등 내 YouTube 채널의 기본 정보를 관리할 수 있습니다.",
    guide2: "핸들은 YouTube에서 크리에이터를 찾아 소통할 수 있는 수단입니다. 핸들은 채널 이름과 구분되는 고유하고 짧은 채널 식별자로, '@' 기호로 시작합니다. @youtubecreators를 예로 들 수 있습니다.",
};

export const BasicTooltip = () => {
    return (
        <>
            <Tooltip
                title={tooltipTitle.guide1}
                placement="top"
                componentsProps={{
                    tooltip: {
                      sx: {
                           width: 500,
                            height: 80,
                            bgcolor: "white",
                            color: "#000",
                            padding: 3,
                            fontSize: "12px",
                            whiteSpace: "pre-line",
                            border: 0,
                            lineHeight: 1.5,
                            boxShadow: "0px 0px 5px rgba(0,0,0,0.3)",
                        },
                    },
                }}>
                <button>
                    <QuestionmarkSvg tw="w-[15px] h-[15px] align-middle ml-4" />
                </button>
            </Tooltip>
        </>
    );
};

 

 

 

width는 안먹힘 why?

 

 

(이 글은 옵시디언을 통해서 발행되었습니다.)