javascript - ReactJS MaterialUI Stepper 在溢出时中断

Question

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

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

标签： javascriptreactjsmaterial-uistepper

Answer 1

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

我修复了你的pastebin：

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

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

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

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