antd에서 Form.Item을 사용하면 쉽게 라벨과 셀렉트 박스 콘트롤을 만들 수 있습니다. 그런데, label의 텍스트가 길면 select에 가려지는 버그? 현상? 뭐 이런게 있습니다. 그래서, label의 텍스트 길이에 따라서 줄바꿈을 하거나 사이즈를 키워줘야 합니다. 디자인을 망치지 않기 위해 label의 width를 설정하려면 아래 코드와 같이 labelCol 속성에 width 스타일을 적용시킬 수 있습니다. selectLabelWidth는 변수입니다.

<Form.Item label={d.alias} labelCol={{style: {width: selectLabelWidth}}}>
    <Select
        style={{width: '100%'}}

공통으로 사용하는 컴포넌트라서 selectLabelWidth로 라벨의 넓이 값을 받아옵니다. 그리고, style: {width: 200}과 같이 설정할 수 있습니다. 일반적으로 style={{width: 200}}과 같이 사용합니다. 하지만, Form.Item의 라벨은 일반적인 방법으로 설정이 불가능합니다. labelCol 속성에 예제와 같이 설정하세요^^

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~