th>tr styling in antd of react

antd는 table, button등 디자인된 component들을 제공하는 모듈입니다.

antd table작업중, docs에는  <th>를 styling하는 방법이 안나와 있어 약간 헤맸습니다.

그래서 오늘은 antd table의 th를 styling 하는 방법을 다뤄보겠습니다.

 

 

 

1. 개발자도구를 통해, 변경하고자 하는 tr의 class이름과 위치를 얻습니다

그림

-그림1의 경우, class는 ant-table-thread이고 위치는 antd.css의 24947번째에 있습니다.

 

2. /node_modules/antd/{css파일}에 들어갑니다

-그림1의 경우 antd.css가 됩니다

 

3. 바꾸고자하는 class명에 속성값을 추가하거나 변경해줍니다

- 저는 padding을 추가해줬습니다

 

4. 다시 npm run dev

- 변경된 css파일의 적용을 위해, 다시 컴파일링을 진행합니다

 

5. 끝입니다ㅎㅎ