javascript - 如何更改 Rebass 的断点？

Question

我正在尝试更改默认断点，但它不起作用。我遵循了文档并使用了ThemeProvider，但 Rebass 仍在使用默认断点。由于这个错误emotion-theming，我没有使用，而是使用：@emotion/react

Error: `emotion-theming` has been removed and all its exports were moved to `@emotion/react` package

我使用这些版本：

"@emotion/react": "^11.1.5",
"rebass": "^4.0.7"

我的代码

_app.js

import { ThemeProvider } from "@emotion/react";

const theme = {
  breakpoints: ["768px", "1024px"]
};

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

index.js

import { Box, Flex } from "rebass";

export default function IndexPage() {
  return (
    <Flex sx={{ flexDirection: ["column", "column", "row"] }}>
      <Box sx={{ width: ["100%", "100%", "50%"], marginBottom: [10, 25, 0] }}>
        Hello
      </Box>
      <Box sx={{ width: ["100%", "100%", "50%"] }}>World</Box>
    </Flex>
  );
}

代码沙盒

我还创建了一个用于复制的沙箱：https ://codesandbox.io/s/rebass-themeprovider-wcc6b

期望

断点应该是768pxand1024px而不是40emand 52em。

标签： javascriptreactjsnext.jsemotionrebass