Reactjs 材质UI框组件导入顺序和样式标记生成

我正在使用材质UI（Mui）框组件来节省时间。它在大多数情况下工作得很好，但当样式与其他Mui组件的默认样式冲突时，我有时会遇到问题。例如，我使用Box组件覆盖Mui工具栏右侧的默认填充（请参见下图）

问题和我的问题在于从这段代码生成样式标记的方式。此框组件生成的样式标记将被工具栏组件生成的样式标记覆盖（请参见下图）

此外，当我检查这些样式标记时，MuiBox标记肯定是在大多数其他样式标记之前插入的，它们似乎是空的。（见下图）

我已经一遍又一遍地阅读了这些文档，并尝试了很多东西。我能找到的最有希望的东西是Box组件的文档：

⚠️ CSS的特殊性取决于导入顺序。如果希望确保覆盖已包装组件的样式，则需要最后导入长方体。 我尝试过这个，但仍然没有成功（见下图）

---

我知道有几种方法可以解决这个问题（例如，makeStyles、with styles、inline styles等等），但是这些策略使得在许多情况下使用Box组件变得毫无意义。因此，我的问题是如何使MuiBox样式的标记具有最高优先级（最后插入），以及当我在DevTools中查看它们时，为什么它们是空的？

相关问题：至于确定

框

样式不获胜的原因，请提供一个复制您的问题的解决方案。@c_rueschenberg您是否能够解决框样式没有最高优先级的问题？我有同样的problem@RyanCogswell这里是@jbojcic的例子，我无法解决它，所以我一直在避免将Box组件与clone prop一起使用。在许多情况下，您可以将长方体用作要克隆以完成工作的任何组件的直接父级或直接子级。在我做不到的情况下，我只是创建了一个新类，并将该类添加到我想要克隆的元素中。