ReactJS MaterialUI Stepper 在溢出时中断
ReactJS MaterialUI Stepper breaks on overflow
我一直试图说服 Material UI Stepper 组件满足我的需要，也就是说显示多个步骤和溢出，但它继续这样做：
我不知道如何解释这个错误...分隔符在水平溢出时做了一些奇怪的事情。 Here 是沙箱。我怎样才能让它工作？
TL;DR: 1) 对标签进行分词 (<StepLabel style={{ wordBreak: "break-all" }}>)，这样它们就不会侵入步骤之间的布局，并且 2) 提供初始宽度步进器 (<Stepper ... style={{ width: 64*16 }}>)，因此它不使用父级宽度。
我修复了你的 pastebin：
NL;PR：您缺少两种样式来处理可滚动容器中的长单词和内容：
对于 1) 标签的文字大于分配的 space 来呈现步骤，因为 550px 对于 16 步来说太紧了，所以他们打破了布局，通过不让冗长的文字溢出来安全地玩标签。
对于 2) 考虑给 Stepper 组件一个比例值 (64 (stepper min-width)* 16(stepper count))，因为你想要一个滚动条，可滚动容器的宽度被用作内容的初始宽度，因此您必须指定内容（Stepper），这样它在溢出之前不会缩小太多。
注意：我提供的这些样式是示例，您可以根据需要自定义它们。此外，考虑通过 类.
传递这些更改
我一直试图说服 Material UI Stepper 组件满足我的需要，也就是说显示多个步骤和溢出，但它继续这样做：
我不知道如何解释这个错误...分隔符在水平溢出时做了一些奇怪的事情。 Here 是沙箱。我怎样才能让它工作？
TL;DR: 1) 对标签进行分词 (<StepLabel style={{ wordBreak: "break-all" }}>)，这样它们就不会侵入步骤之间的布局，并且 2) 提供初始宽度步进器 (<Stepper ... style={{ width: 64*16 }}>)，因此它不使用父级宽度。
我修复了你的 pastebin：
NL;PR：您缺少两种样式来处理可滚动容器中的长单词和内容：
对于 1) 标签的文字大于分配的 space 来呈现步骤，因为 550px 对于 16 步来说太紧了，所以他们打破了布局，通过不让冗长的文字溢出来安全地玩标签。
对于 2) 考虑给 Stepper 组件一个比例值 (64 (stepper min-width)* 16(stepper count))，因为你想要一个滚动条，可滚动容器的宽度被用作内容的初始宽度，因此您必须指定内容（Stepper），这样它在溢出之前不会缩小太多。
注意：我提供的这些样式是示例，您可以根据需要自定义它们。此外，考虑通过 类.
传递这些更改