search

choigirang / portfolio

포트폴리오 v1
https://v1.choigirang-portfolio.site
0 stars 0 forks source link

Header: Mui Tab 커스텀 시 property error #3

Open choigirang opened 6 months ago

choigirang commented 6 months ago

Mui Tab codesandbox

<Tab
    key={list}
    label={list.replace('/', '')}
    value={'/' + list}
    to={list}
    component={Link}
    onClick={() => pageScrollHandler(list)}
/>

코드 예제에 나와있는 것처럼 to & component property를 사용하는 것은 가능... 커스텀 시 속성 에러 발생... styled import를 잘못한 것도 아닌데 커스텀 시에만 에러가 발생

<TabList to={}.../> // property 'to' error

const TabList = styled(Tab)({....})
choigirang commented 6 months ago

Mui에서 제공하는 기본 속성에는 존재하지 않으나, 예제 코드에서는 react-router-dom 을 활용하여 to & component를 부여하고 있음

커스텀 하여 사용 시에는 기본 속성만 사용할 수 있기 때문에 추가적인 타입 작성이 필요함

export type TabPropsType = {
  to: string;
  component: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
};

const TabList = MuiStyled(Tab)<TabPropsType>(({ theme }) => ({
  '.Mui-selected': {
    color: theme.palette.mode === 'dark' ? '#ffb700' : '#000f1f',
  },
}));