ReactJS MaterialUI Stepper 在溢出时中断

Question

我一直试图说服 Material UI Stepper 组件满足我的需求，也就是说，显示多个步骤和溢出，但它继续这样做：

我不知道如何解释错误...分隔符在水平溢出时做了奇怪的事情。 Here 是沙盒。我怎样才能让它工作？

Answer 1

TL;DR： 1) 对标签进行分词 (<StepLabel style={{ wordBreak: "break-all" }}>)，这样它们就不会侵入步骤之间的布局；2) 为步进器提供初始宽度 (<Stepper ... style={{ width: 64*16 }}>)所以它不使用父宽度来这样做。

我修复了你的pastebin：

NL;PR：您缺少两种样式来处理可滚动容器中的长字和内容：

对于 1) 标签的文字大于分配的空间来渲染步骤，因为 550 像素对于 16 个步骤来说太紧了，所以他们破坏了布局，不要让冗长的文字溢出标签来保证它的安全。

对于 2) 考虑给定 Stepper 组件一个比例值 (64 (stepper min-width)* 16(stepper count))，并且由于您想要一个滚动条，因此将可滚动容器的宽度用作初始值内容的宽度，因此您必须指定内容（Stepper），以免在溢出之前收缩太多。

注意：我提供的这些样式是示例，您可以根据需要自定义它们。另外，请考虑通过类传递这些更改。