Any strategies for changing breakpoint tokens per component?

[dungle-scrubs]

We often build from designs that require one section to have different breakpoints vs the rest of the design. For example, md could be 768px everywhere but 800px in one component.

Is it possible to modify the breakpoint values for a component, resetting them afterward?

[LexSwed]

You can still use media queries from within the component

styled('div', {
  '@media (min-width: 8000px)': {
    // custom styles
  }
})

[dungle-scrubs]

Sorry I should have expanded more on my use case. I'm using ahooks' useResponsive for conditional rendering based on breakpoints.

I feed that hook the same breakpoints object that I use for Stitches and it works great. I can also feed it a single-breakpoint override that will work just for that component.

However, it doesn't translate over to stitches styled function. Ideally, I'd like to be able to both conditionally render using useResponsive and have access to the same breakpoint override within the styled function.

I did attempt to import styled with a wrapper function that feeds it different media, but it looks like it gets overwritten by the next component that calls styled (actually, in that case both media queries will exist, the custom and the default).