소개일상공책
Files
Files
        • 30.mdx20.mdx16.mdx14.mdx04.mdx

0504 내가 antd가 싫은 이유

2024. 5. 4.

겉으로는 깔끔해보이는데 DOM 노드 까보면 정반대임

위와 같이 Antd API인 Steps를 사용했다.

대충 이런 Items 배열을 집어넣는데, title에 각 ReactNode 행이 삽입된다

이런 식으로 가로가 100%가 안채워져서 width: 100% 속성을 부여해주고 싶다

근데 저 title 객체는 단순히 Steps 한 단계 바로 아래의 노드가 아니라 보이지 않는 몇 겹의 div 노드 아래에 위치해있고 일반적인 API 조작으로는 접근이 안된다... 한 마디로 요약하자면 title에 속성을 부여하지 못함. 암만 ScheduleItem에 width: 100% 부여해봤자 저 item-title class를 가진 div에 width값을 수정하지 않으면 채울 수가 없음

이런 Steps 말고도 다른 API가 모두 Docs에 나와있지 않은 복잡한 겹구조로 싸여있어서 CSS 커스터마이징이 개빡세다. 개발 맨처음에 배우면서 동아리 내 간이 해커톤 예행행사 때 스타일링 Antd로 하면 편하긴 한데 커스터마이징이 어려울 수 있다는 말을 들었던 기억이 스치듯 지나간다...

!! title 말고 description에 집어넣으니까 width 편집 가능함 ㅋㅋㅋ 개미친 편법...

왼쪽 화살표05140628오른쪽 화살표