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

안녕하세요

antd를 사용해서 개인 웹 사이트를 만들고 있습니다

클릭했을 때 발생하는 antd 의 효과를 없애고 싶어서 styled-components를 사용했습니다

예를 들어서, 토글키를 클릭하면 하위 메뉴가 보이는 A버튼이 있다고 했을 때,

A버튼을 눌렀을 때 파란색으로 글자색이 바뀌는 효과를 없애고 싶었습니다.

연습 삼아서 폰트 크기만 변경했는데, 변경이 되었습니다. 

문제는, 토글 관련 함수들이 먹통이 되는 것입니다.

antd의 효과를 없애기 위해서는, 스타일드 컴포넌트로 변경을 하는게 아니라,

그냥 처음부터, antd를 쓰지 않고, 제가 원하는 효과를 적용하면서 메뉴를 구성하는 방법 뿐일까요?

아래는 코드입니다 ( 어떤 코드냐면, 'study-logs'라는 버튼을 누르면 react, next, js 라는 하위 메뉴 버튼이 토글 형식으로 생성되는 것입니다 )

<SubMenu key="sub2" icon={<LaptopOutlined />} title="study-logs">
  <Menu.Item key="5">react</Menu.Item>
  <Menu.Item key="6">next</Menu.Item>
  <Menu.Item key="7">js</Menu.Item>
</SubMenu>
위의 코드를 아래처럼 바꾸었습니다.
--

const TextSubmenu = styled('SubMenu')`
  font-size: 24px;
`

<TextSubmenu key="sub2" icon={<LaptopOutlined />} title="study-logs">
  <Menu.Item key="5">react</Menu.Item>
  <Menu.Item key="6">next</Menu.Item>
  <Menu.Item key="7">js</Menu.Item>
</TextSubmenu>


여기서 폰트사이즈를 변경한 것은, 실제css가 적용이 되는지 테스트 해 보기 위함이었고,
실제로 폰트 사이즈가 변경은 되었습니다.
하지만, 기존에 있던 기능들이 작동을 안 합니다.