MUI tooltip 커스텀하기 - font size media query

MUI tooltip을 커스텀하여 사용해보자. 

 

보통 <app>에 <ThemeProvider>를 감싸 사용하는데,

나는 Routes에 감쌌다. 

 

MUI Tooltip에 arrow 부분이 default값으로 설정되어 있어서 동떨어져 있었다.

styleOverrides부분에 arrow &::before를 추가했다.

 

 

전체 코드 

 

Routers.tsx

import { createTheme, ThemeProvider } from '@mui/material';

const Routers = () => {
  const theme = createTheme({
    components: {
      MuiTooltip: {
        styleOverrides: {
          arrow: {
            '&::before': {
              color: 'rgba(0, 0, 0, 0.6)',
            },
          },
          tooltip: {
            '@media (max-width:439px)': {
              fontSize: '12px',
            },
            fontSize: '14px',
            fontWeight: 'normal',
            background: 'rgba(0, 0, 0, 0.6)',
          },
        },
      },
    },
  });

return (
    <ThemeProvider theme={theme}>
      <Routes>
        <Route element={<MainLayout />}>
         //생략.. 
      </Routes>
    </ThemeProvider>
  );
};

export default Routers;