css 脉轮用户界面：如何使sx属性仅应用于选定的断点

huwehgph 于 2023-01-06 发布在其他

关注(0)|答案(1)|浏览(108)

让一个组件定义某种sx样式，使其仅从特定断点开始应用，最好的方法是什么（我甚至对第二好的方法也感兴趣）？

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

在上面的示例中，sx内的所有内容都应仅应用于lg+断点（针对桌面），而不应应用于较低的断点（移动的/平板电脑）。
据我所知，有一种方法可以解决我使用useBreakpointValue手动检查断点是否是我应用样式的断点的问题，但我想知道是否有更好的方法可以实现这个结果

css

来源：https://stackoverflow.com/questions/74425237/chakra-ui-how-to-make-sx-property-apply-only-to-selected-breakpoints

1条答案

按热度按时间

hfsqlsce1#

以下是一些选项：
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

赞(0）回复(0）举报 2023-01-06

我来回答

css 脉轮用户界面：如何使sx属性仅应用于选定的断点

1条答案

相关问题

热门标签

最新问答