포스트메모
    • 12월
    • 11월
    • 10월
    • 9월
    • 8월
    • 7월
    • 6월
    • 5월
    • 4월
    • 3월
    • 2월
  • 0530

    24. 5. 30.

  • 0520

    24. 5. 20.

  • 0516

    24. 5. 16.

  • 0514

    24. 5. 14.

  • 0504 내가 antd가 싫은 이유

    24. 5. 4.

로딩 중...

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 편집 가능함 ㅋㅋㅋ 개미친 편법...

왼쪽 화살표2414오른쪽 화살표