탭을 재질 UI의 작은 공간에 맞게 설정하는 방법은 무엇입니까?

Question

doc 당, 나는 탭을 중심으로 한 fullWidth를 시도했지만 작동하지 않는 것 같습니다. 탭을 특정 화면 크기로 다시 조정하려면 어떻게합니까?

나는 작은 컨테이너 너비에 맞게 탭을 강제 할 수있는 가장 쉬운 방법을 생각 최신 베타 V23

Answer 1

를 사용하고, 다음과 같습니다

<Tab style={{ minWidth: 50 }} label="item" />

기본 최소값이 매체 160 픽셀입니다 화면 크기가 작고 화면 크기가 72px입니다.

적합 정도에 따라 패딩 및 글꼴에 다른 종류의 재정의를 수행 할 수도 있습니다. I tried out a few techniques on CodeSandbox.

더 많은 탭을 사용할수록 사용성이 떨어집니다. 다른 해결 방법도 있어야합니다! 예를 들어, 레이블 텍스트를 단축하거나 아이콘을 사용하거나 구조 조정을하십시오.