Chakra UI: how to make sx property apply only to selected breakpoints

Question

What would be the best (I'd be interested even in 2nd best) approach to make a component define some sx style that applies only starting from particular breakpoint?

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

In the example above everything inside sx should be applied only to lg+ breakpoints (targeting Desktop) and nothing should be applied to lower breakpoints (mobile/tablet).

As far as I understand there is a way around my issue with using useBreakpointValue to manually check whether the breakpoint is the one where i apply the style or not, but I'm wondering if there is a better approach to achieve the result

score 0 · Answer 1 · answered Jan 06 '23 at 01:20

Here are some options:

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"
    }
  }}
/>

score 0 · Answer 2 · answered Aug 16 '23 at 11:41

Came here looking for a solution same as the question in regards to setting sx on a breakpoint and I found that:

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

to also work so you do not have to hard set the min-width.

Chakra UI: how to make sx property apply only to selected breakpoints

2 Answers2