Chakra UI：如何使 sx 属性仅应用于选定的断点

Question

使组件定义仅从特定断点开始应用的某些

sx

样式的最佳（我什至对第二最佳）方法是什么？

<MyComponent
  transition="1s"
  sx={{
    ...
    transform: 'translateY(-100%)',
    ...
  }}
>
  {componentContent}
</MyComponent>

在上面的示例中，

sx

内的所有内容都应仅应用于

lg+

断点（针对桌面），并且不应将任何内容应用于较低的断点（移动设备/平板电脑）。

据我了解，有一种方法可以解决我的问题，即使用

useBreakpointValue

手动检查断点是否是我应用样式的断点，但我想知道是否有更好的方法来实现结果

Answer 1

以下是一些选项：

https://codesandbox.io/s/sx-breakpoint-mdsjhz?file=/src/index.js

<Box
  width="100px"
  height="100px"
  sx={{
    // one-liner
    // https://chakra-ui.com/docs/styled-system/responsive-styles
    bg: { base: "pink.200", md: "green.200" },

    // equivalent array syntax
    // bg: ["pink.200", null, "green.200"],

    // alternatively, multiple properties in a single condition
    // https://chakra-ui.com/docs/styled-system/the-sx-prop#custom-media-queries
    "@media screen and (min-width: 768px)": {
      borderWidth: 16,
      borderColor: "purple.500"
    }
  }}
/>

• https://chakra-ui.com/docs/styled-system/responsive-styles
• https://chakra-ui.com/docs/styled-system/the-sx-prop#custom-media-queries

Answer 2

来这里寻找与在断点上设置

sx

的问题相同的解决方案，我发现：

<MyComponent
  transition="1s"
  sx={{
    lg: { <=== HERE
      ...
      transform: 'translateY(-100%)',
      ...
    }
  }}
>
  {componentContent}
</MyComponent>

也可以工作，这样您就不必硬设置

min-width

。