1. 초기화면
&nbsp;<img src="https://cdn.inflearn.com/public/files/posts/e7402c08-9ac1-47da-bd64-9a23c78c15cf/blob" alt="" />

2. 타임라인 메뉴 선택 (사이트 렌더링은 잘됨, 그러나 메뉴선택시 배경이 푸른색으로 변하는 스타일은 적용되지않음)
<img src="https://cdn.inflearn.com/public/files/posts/67b415a2-9c92-42cd-b691-d01ed328305d/blob" alt="" />
3. 타임라인 메뉴선택 반복 (타임라인을 두번 클릭하니 그제서야 배경이 푸른색으로 변함)
<img src="https://cdn.inflearn.com/public/files/posts/f316e3f8-3010-43bb-a76d-1d89dda864ef/blob" alt="" />
.... 개발자도구로 확인해보면,
hover됐을 때(메뉴 item글씨가 진해졌을 때) 메뉴 item의 class가 ant-menu-item-active로 바뀌고,
3번같은 상태의 class는 ant-menu-item-selected로 바뀌는걸 확인했습니다.

문제는 .. 왜..메뉴item을 한 번클릭하면 selected가 적용 안되고, 두 번 클릭했을 때만 selected가 적용되는걸까요?

실제 SSR 되는 환경에서 말씀하시는 거죠? 이게 SSR된 후에 새 페이지가 렌더링 되면 그 메뉴 페이지로는 이동하지만 selected가 풀려버립니다. 그 후에 다시 눌렀을 때는 SSR이 아니라 antd가 작동하므로 정상적으로 됩니다.
https://ant.design/components/menu/
여기 보시면 defaultSelectedKeys props가 있는데 여기에 현재 페이지에서 어떤 메뉴를 하이라이트할지 적어주면 됩니다.

인프런 커뮤니티 질문&답변

antd 메뉴바 스타일 적용안됨