FluentUI React v9 콤보박스 - 구성 요소 너비를 설정할 수 없습니다.

Question

Fluent UI 콤보박스 구성 요소(@fluentui/react-comComponents)의 너비를 지정하는 방법이 있나요?

다른 입력 요소의 경우 style={{width: "123px"}} 설정을 사용할 수 있지만 이것이 권장되는 방법인지는 확실하지 않습니다. 콤보박스로 작업하세요. <

Answer 1

style={{width: "123px"}} 不起作用，因为组合框的根元素的固定 min-width 250px로 설정하세요.

따라서 콤보 상자의 너비를 변경하세요. 달성하려는 목표에 따라 달라집니다.

더 크게 만들고 싶다면 간단히 이 최소 너비를 늘리면 됩니다.

으아악

특정 너비로 ​​설정하려면 루트 요소의 최소 너비를 설정 해제한 다음 기본 입력 요소의 너비를 설정할 수 있습니다(이 경우 콤보박스의 최종 너비는 입력 패딩으로 인해 20px보다 커집니다) 및 드롭다운 버튼):

으아악

EDIT: style-Prop을 사용하는 대신 CSS 클래스를 사용할 수도 있습니다(제 생각에는 더 깔끔한 방법):

으아악