Reactjs 较小的断点总是覆盖较大的断点

只是想知道如何使较大断点的样式不被较小断点覆盖

我在下面试过了

但是为lg:0生成的样式被md:2生成的样式覆盖

我知道它受到样式顺序的影响，我想知道如何定制它

---

对不起，我的英语很差：（

样式是按照对象中属性的顺序写入的，因此如果您希望较大的断点获胜，它必须是最后一个。在下面的示例中，两个框在较小的窗口大小中看起来相同，但在较大的窗口大小中，只有第二个框变为不再缩进

import React from "react";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <>
      <Box ml={{ lg: 0, xs: 10 }}>margin-left {"{ lg: 0, xs: 10 }"}</Box>
      <Box ml={{ xs: 10, lg: 0 }}>margin-left {"{ xs: 10, lg: 0 }"}</Box>
    </>
  );
}

从“React”导入React；
从“@material ui/core/Box”导入框；
导出默认函数App（）{
返回(
左边距{lg:0，xs:10}
左边距{xs:10，lg:0}
);
}

---

样式是按照对象中属性的顺序写入的，因此如果您希望较大的断点获胜，则必须是最后一个。在下面的示例中，两个框在较小的窗口大小中看起来相同，但在较大的窗口大小中，只有第二个框变为不再缩进

import React from "react";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <>
      <Box ml={{ lg: 0, xs: 10 }}>margin-left {"{ lg: 0, xs: 10 }"}</Box>
      <Box ml={{ xs: 10, lg: 0 }}>margin-left {"{ xs: 10, lg: 0 }"}</Box>
    </>
  );
}

从“React”导入React；
从“@material ui/core/Box”导入框；
导出默认函数App（）{
返回(
左边距{lg:0，xs:10}
左边距{xs:10，lg:0}
);
}

---

谢谢你的回复，我在你的帖子中尝试了它，但我没有看到它受到断点顺序的影响，我在下面写道，它有什么问题吗？mt={{xs:2，lg:0}请共享一个沙盒来重现您的问题。您评论中的代码看起来很好。在我的示例中，顺序会有所不同。我尝试过更改“lg”和“xs”的顺序，无论顺序如何，“lg”的边距顶部总是被“xs”覆盖。正如我所说，请共享一个重现它的沙盒。这是我的错误，我检查了示例您在上面展示的e代码并重新检查了我的代码，我意识到我错过了与mt一起传递的另一个prop width={lg:500}，我将xs:0添加到其中，然后它按预期工作。非常感谢您帮助我解决问题。：）感谢您的回复，我尝试了您的帖子中的它，但我没有看到它受到断点顺序的影响，我只是在下面写道，它有什么问题吗？mt={{xs:2，lg:0}}请共享一个沙箱，重现您的问题。注释中的代码看起来不错。在我的示例中，顺序会有所不同。我尝试更改“lg”和“xs”的顺序，无论顺序是什么，“lg”的边距顶部总是被“xs”覆盖。正如我所说，请共享一个沙盒来复制它。这是我的错误，我检查了您上面提供的示例代码，并重新检查了我的代码，我意识到我错过了与mt一起传递的另一个prop width={lg:500}，我在其中添加了xs:0，然后它按预期工作。非常感谢你帮我解决这个问题。：）